I've been using an SVG wrapper for images intended to be used on a full page. Replace the 1000 width and 1500 height with the appropriate ones for your image sizes (note that those numbers are used twice).
The HTML code used is:
Code:
<body class="cover">
<div class="picWrapper">
<svg class="pic" xmlns="http://www.w3.org/2000/svg" height="100%" preserveAspectRatio="xMidYMid meet" version="1.1" viewBox="0 0 1000 1500" width="100%" xmlns:xlink="http://www.w3.org/1999/xlink"><image height="1500" width="1000" xlink:href="../Images/cover.jpeg"/></svg>
</div>
</body>
The code in the stylesheet is:
Code:
.cover {
margin: 0;
height: 99vh; /* This property is for epub3 */
max-width: 100%; /* This property is for epub3 */
overflow: hidden !important;
}
.picWrapper {
margin: 0;
padding: 0;
height: 100%; /* This property is for epub3 */
}
.pic { /* This is the epub2 layer */
display: block;
margin: auto;
width: 100%;
position: absolute;
top: 0; bottom: 0; left: 0; right: 0;
}