CSS image sizing

Question

I'm creating an ePub, and I'd like the images to span the full width of the page, but to never be taller than 100% of the height of the page.

Ideally, if the image was taller than the page (and therefore clipped) then it would instead be scaled to 100% height of the page, the width scaling accordingly.

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

Answer 1

for images in portrait format you'll want to ensure they're either preceded by a page-break, or set page-break-inside:avoid; and wrapped in a container that's 100% high (or just under that so that it doesn't overflow to the next page). it's weird to have to include both margin:0 auto; and for the image to be display:inline-block;, (especially since inline-block isn't officially part of the epub2 spec) but you're working against the quirks in various readers to centre 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'll also want to wrap the images in a container that's set to 100% width, and then adjust the size of the image itself in percentages.

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've never come across a solution that accounts for both image formats, unless you're using an SVG wrapper, which has to include the desired dimensions of the image:

<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>