Best way for reflowable cover without svg
I created a method for reflowable cover without svg since Apple advise not to use images wrapped in svg.
I hope it helps someone!
<?xml version="1.0" encoding="utf-8"?>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:epub="http://www.idpf.org/2007/ops" xml:lang="us" lang="us">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Cover</title>
<style type="text/css" title="override_css">
@page{padding: 0pt; margin: 0pt}
body{height: 100%; padding: 0pt; margin: 0pt;}
#cover{width: 100%; height: 100%;}
#cover img{max-height: 100%; max-width: 100%; height: auto; width: auto; position: absolute; top: 0; bottom: 0; left: 0; right: 0; margin: auto;}
</style>
</head>
<body>
<div id="cover">
<img src="cover.jpg" alt="Cover" />
</div>
</body>
</html>
|