Resizing images, retaining width-height rato, and only if necessary.

[Vanguard3000]

Hi, folks.

I'm putting together an ebook (epub for kobo glo) and it has a lot of scanned images, diagrams, etc, that must be large to be read or otherwise appreciated, but in some cases (or, should I open the document with a smaller-screened ereader), I'd like the image to be automatically scaled down to fit the screen width or height (whichever it needs to do to fully fit on screen).

I've looked through a lot of topics here, on stackoverflow, etc, but there seems to be conflicting opinions regarding width vs max-width and so forth, so I figured I'd just ask and see what happens. So, to lay out what I need:

-Image dimensions must be preserved, i.e., an image of 800x600px must retain a 4:3 aspect ratio (obviously, I don't want the image to be stretched or smeared)
-If resizing is necessary, it should only be reduced in size. I don't need the image to be blown up to fit a screen; only shrunk down to fit.
-The image must fit fully onto the screen so that either the horizontal or vertical sides of the image touch the sides of the ereader margins.

Any help would be appreciated. Thanks in advance.

[Notjohn]

I don't have a Kobo reader; my only experience is with Kindles, Fire tablets, and Nooks.

On the first-generation Kindles, images will be full screen unless they are very small to begin with. There's no way to control that. I think the same is true of Kindle for iPad.

On the tablets, the reader can zoom any image (within reason) but otherwise the higher the resolution, the smaller the image, unless one uses a width="100%" instruction in the html.

BUT full screen means the dimensions of the text, with whitespace all around. A zoomed image will indeed reach to the edge of the screen, at least in one dimension.

I have never seen a distorted image, even when I use width="100%" and hold the tablet in landscape mode.

[davidfor]

I use:

<svg xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg" version="1.1" width="100%" height="100%" viewBox="0 0 779 1200" preserveAspectRatio="xMidYMid meet">
<image width="779" height="1200" xlink:href="../images/cover.jpg"/>
</svg>

The numbers have to be changed to the width and height of the image.

That will fill the screen without changing the aspect ratio if the image is larger than the screen. And smaller images will be shown centred on the screen at their natural size.

[Turtle91]

I also use SVG on any images that I want to take up a full screen by itself. The reading app I use (MARVIN) properly handles SVG but I've heard some kindles ignore SVG after the cover (??) and some devices might not support SVG at all (???). If that is a concern for you, or if you just want to insert an image in the flow of text, you can use the following:

<div class="whatever"><img alt="" src="../Images/example.jpg" /></div>

with CSS:
.whatever {width:100%; max-width:9999px}

width causes the div to take up the full width of your container.

max-width limits the width of the div to a certain number. If you set that value to the actual width of your image in pixels, then the image will not be stretched and will not blur on larger screens.

If you just use width then aspect ratio is kept for all images. The problems I find are when people try and set width AND height (ie width:100%; height:100%). That usually causes stretching and distortion. Part of the problem is that not all devices/apps define height the same way... but that's a whole 'nuther topic.

Cheers!

[Notjohn]

Originally Posted by Turtle91

<div class="whatever"><img alt="" src="../Images/example.jpg" /></div>

with CSS:
.whatever {width:100%; max-width:9999px}

Thank you for that! I've always put the width instruction inline, but I am tempted to do it your way in the future, just so I can have a style entitled whatever, tee hee.

Does min-width also work in a situation like that? Say width:30%; min-width:130px?

[Turtle91]

Originally Posted by Notjohn

Thank you for that! I've always put the width instruction inline, but I am tempted to do it your way in the future, just so I can have a style entitled whatever, tee hee.

Does min-width also work in a situation like that? Say width:30%; min-width:130px?

Yes, min-width works. I use that in cases such as a chapter head image or chapter division fleur. I'll use:

.whatever {width:15%; min-width:30px; max-width:120px}

to ensure the image is not too small that you can't see it, or too large that it gets all blurry, otherwise it is 15% of the screen (container) width.


Caveat: I use Sigil and Calibre to edit, and Marvin to read. I can't speak to supportability with other devices...but the html/css is sound.

[Notjohn]

Thanks again. AFAIK, that works on every Kindle except K1, K2, and DX (and, some say, early builds of the K3 Keyboard). Oh, and Kindle apps on some or all iPads, though weirdly I have no problem with my iPhone 4.

[Vanguard3000]

Thanks for the suggestions, everyone! Its too bad that this stuff is so non-standard. I'm always nervous when fixing up ebooks that what I'm doing will work on my current reader, but not the next one down the line.