Img's Max-Height Not Respecting Parent's Dimensions

Img's max-height not respecting parent's dimensions

I figured it out. For an element's max-height to work, one of its parents must have a height attribute defined (apparently in a fixed unit, like px, not in percentage).

From the w3c specs:

The percentage is calculated with respect to the height of the
generated box's containing block. If the height of the containing
block is not specified explicitly (i.e., it depends on content
height), and this element is not absolutely positioned, the percentage
value is treated as '0' (for 'min-height') or 'none' (for
'max-height').

Since none of my img's parent have a fixed height defined, I had to limit my img to max-width instead.

Edit: Also, it seems webkit takes the specs a little too literally: https://stackoverflow.com/a/3808701/857807

I used the workaround presented in that thread, and used position: absolute; max-height: 100%; top: 0.

img height/width ignoring parents div height/width

This is an HTML/CSS problem, the size of a child is not define by the size of his parents. This is due of the default value of height and width.
In CSS default value of height and width is :

img{
    height: auto;
    width: auto;
}

auto let the browser calculates the height, so it's not the best way.

For a cleaner code use height: inherit; and width width: inherit; that allows the child inherits this property from its parent element

max-height on IMG not working inside of fixed DIV

When you apply a percentage height on an element, you need to set a height on the parent. Setting a max-height or min-height doesn't work (as you can see). It must be the height property.

For an illustration, switch the max-height: 700px to height: 700px. Now your image height works.

Alternative solution: Since you're telling your image to be max-height: 100%, of a container with max-height: 700px, why not also tell the image to be max-height: 700px? This takes you around the percentage height problem.

More information:

• Working with the CSS height property and percentage values

How to set max-height of an image to height of the parent div in CSS rules?

Absolute positioning is one of the solutions

img {
  position: absolute;
  right: 0;
  max-width: 500px;
  max-height: 100%;
}
div {
  position: relative;
}

---

Related Topics