Forum How do I...?

max-height for images

ixgal
hi,
When I use an image that is very wide, the max-width:100% property works ok (the image is scaled to the width of the text section).
But the max-height is not working so well (part of the image is missing). Please see screenshot enclosed.
Maybe this has to do with the page header? (where the page number is located)

Just in case, the css has this:

img {
height: auto;
max-width: 100%;
max-height: 100%;
}

Thanks
  1. image.png82.7 kB
pjrm
See http://www.w3.org/TR/CSS2/visudet.html#x16 for what 'max-height' percentages are calculated relative to, but in many cases a percentage height in CSS is considered equivalent to 'none'.

In some cases, the solution is to specify an explicit 'height' value for the containing block; but in the current case, I'd suggest instead specifying 'max-height' in mm/in/pt.

(The problem that the authors of that part of CSS were trying to solve is that the used height of the containing block will often depend on the used height of the box that the 'max-height' property is applied to. Their solution is to pick a fairly simple rule, though this does mean that percentage heights aren't often very useful.)