Quote:
Originally Posted by RS21
I used this solution to make my cover image fit in the reader's screen.
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. |
I'm surprised that you see this preserving the aspect ratio. What are you viewing it on?