CSS Image Size

Question

I am creating an ePub, and I would like the images to cover the entire width of the page, but never exceed 100% of the page height.

Ideally, if the image was above the page (and therefore cropped), then instead it would be scaled to 100% of the page height, respectively, scaling the width.

max-height seems to just distort the image out of proportion, any ideas?

Answer 1

for images in portrait format, you want to make sure that they are preceded by a page break or set page-break-inside:avoid; and wrapped in a container that is 100% higher (or just below it so that it does not overflow on the next page). strange to include as margin:0 auto; , and for the image display:inline-block; (especially since inline-block is not officially part of the epub2 specification), but you work against quirks in different readers to center the image:

CSS

 .imageWrapperHi { height:99%; width:100%; text-align:center; page-break-inside:avoid; } .imageWrapperHi img { display:inline-block; height:100%; margin:0 auto; } 

HTML:

 <div class="imageWrapperHi"> <img alt="" src="../Images/img1.jpg"/> </div> 

for landscape images, you will also want to wrap the images in a container that is set to 100% width, and then adjust the size of the image itself as a percentage.

CSS

 .imageWrapperWide { width:100%; text-align:center; page-break-inside:avoid; } .imageWrapperWide img { display:inline-block; width:100%; margin:0 auto; } 

HTML:

 <div class="imageWrapperWide"> <img alt="" src="../Images/img1.jpg"/> </div> 

I have never come across a solution that takes into account both image formats, unless you use an SVG shell, which should include the right image sizes:

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

Answer 2

Only the solution that I understand is "no higher = trimmed" ... to maintain proportions:

Make a container with overflow:hidden

HTML

 <div id="container"> <img src=" "/> </div> 

CSS

 * { margin:0; padding:0; } body, html { height:100%; } #container { max-width:100%; height:100%; max-height:100%; overflow:hidden; } #container img { width:100%; height:auto; } 

Demo http://jsfiddle.net/zbvhx/