Images for different size readers

JSWolf · 12-30-2009, 07: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, 04: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:

Code:

<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, 11:29 AM

Thanks! I'll have to give it a go and see how it works on the 505 and 900.

12-30-2009, 07:37 PM	#1
JSWolf Resident Curmudgeon Posts: 79,517 Karma: 145863177 Join Date: Nov 2006 Location: Roslindale, Massachusetts Device: Kobo Libra 2, Kobo Aura H2O, PRS-650, PRS-T1, nook STR, PW3	Images for different size readers 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.

12-31-2009, 04:40 AM	#2
Jellby frumious Bandersnatch Posts: 7,546 Karma: 19001583 Join Date: Jan 2008 Location: Spaniard in Sweden Device: Cybook Orizon, Kobo Aura	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: Code: <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.

Similar Threads
Thread	Thread Starter	Forum	Replies	Last Post
How to stop images from doubling size?	bfollowell	Amazon Kindle	2	10-12-2010 09:55 PM
Any way to make images exact size using HTML?	khutch	Calibre	4	10-03-2010 11:59 AM
How to increase teh size of images in .mobi files	nvr	Kindle Formats	2	01-12-2010 11:23 AM
PDF images not visible in Medium size font	asaxena11	Sony Reader	3	12-20-2008 10:10 PM
Cover images for PML/PDB -- size?	Jon Noring	Workshop	0	08-13-2008 07:35 PM

12-31-2009, 11:29 AM	#3
JSWolf Resident Curmudgeon Posts: 79,517 Karma: 145863177 Join Date: Nov 2006 Location: Roslindale, Massachusetts Device: Kobo Libra 2, Kobo Aura H2O, PRS-650, PRS-T1, nook STR, PW3	Thanks! I'll have to give it a go and see how it works on the 505 and 900.

Advert