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