View Single Post
Old 06-08-2018, 12:32 PM   #1
Wlan
Enthusiast
Wlan began at the beginning.
 
Wlan's Avatar
 
Posts: 25
Karma: 10
Join Date: Jun 2018
Device: none
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>
Wlan is offline   Reply With Quote