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?

Along

Isn't max-width more logical? – Cruce

if the image is the full width of the page, and retains its proportions, what do you want to do if the browser is resized to be less tall than the image? – Himelman

not taller = clipped? – Deathly

I think the original poster is correct: max-width will impose a limitation on the width, not force an expansion. As I read it, he wants it to expand only until one or more borders are reached. – Vermination

@chendriksen, can you clarify a bit. If you have an image that is a perfect square and you want to display it on a horizontal monitor, should that image be (1) clipped at either the top or bottom, (2) adjusted in its aspect ration (such that everything in the image will look squashed), or (3) stopped from expansion so that it hits the top and bottom margins and there is white space to the left and right? – Vermination

@JoeDeRose my apologies for not being clearer. The images are varying in shape, the ideal would be an image occupying the full width of the screen, unless this means it's overflowing the bottom, where it would instead become the full height of the screen. Keeping the right proportions either way. – Along

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>

Baptistry

Answer 2

Only solution i understand, "not taller = clipped" ... to retain 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/

Deathly

Sorry Danko I should have been clearer, I actually want the opposite! If the image is too tall for the page (and is therefore overflowing) I'd like the image to instead be scaled to 100% width and it's according height. – Along

it's according heights is 100% of the page? – Deathly