View Full Version : Images for different size readers


JSWolf
12-30-2009, 08:37 PM
What is the proper code for ePub to allow an image to display as full screen as possible without going past the edges of the screen?

For example, I have an ePub that uses height=100% and it works great on my 505. But when I viewed this same ePub on the 900, because the screen is longer and a fraction wider, the image was cut off on the left and right size when it was stretched to the full screen.

Jellby
12-31-2009, 05:40 AM
I'd try "max-width:100%; max-height:100%;". That should work (if the relative height works), but won't enlarge images, just reduce them if needed.

If you want to resize in any direction, I believe you have to use 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 600 800" preserveAspectRatio="xMidYMid meet">
<image width="600" height="800" xlink:href="images/Cover.png" />
</svg>

In viewBox and the <image> element use the image's pixel dimensions (not compulsory, but easier to manage). The key part is the preserveAspectRatio="xMidYMid meet" property.

JSWolf
12-31-2009, 12:29 PM
Thanks! I'll have to give it a go and see how it works on the 505 and 900.