I used this solution to make my cover image fit in the reader's screen.
Quote:
Originally Posted by pdurrant
[B]
It is possible to get an image to properly resize to fill the page using an svg wrapper.
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="100%" viewBox="0 0 573 800" preserveAspectRatio="xMidYMid meet">
<image width="573" height="800" xlink:href="../images/img0032.png" />
</svg>
which I use for the cover image.
|
However, I noticed that the eBook took about 40 seconds to load for the first time. Removing the cover image made it load much faster, about 5 seconds, identifying the cover image as the culprit.
So, I tried a more straight-forward solution. Mark-up:
Code:
<body>
<div>
<img id="cover" src="../Images/cover.jpg" />
</div>
</body>
and style:
Code:
img#cover
{
max-width: 100%;
max-height: 100%;
display: block;
margin-left: auto;
margin-right: auto;
}
This will maintain aspect ratio, and will horizontally center the image, if the screen is wider than the image. Vertical alignment will be top.