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

by

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.

More Related Contents:

  1. 100% height background starting at 50% horizontally
  2. Is it possible to set the equivalent of a src attribute of an img tag in CSS?
  3. flex-grow not sizing flex items as expected
  4. AngularJS ngClass conditional
  5. Responsive image map
  6. How to make a vertical line in HTML
  7. How to display an unordered list in two columns?
  8. Difference in applying CSS to html, body, and the universal selector *?
  9. css background color with floating elements
  10. Transform: translate(-50%, -50%)
  11. How to create a curve between two gradient using CSS?
  12. Line break (like ) using only css
  13. Turn off Chrome/Safari spell checking by HTML/css [duplicate]
  14. How to get a background image to print using css?
  15. How to set an image’s width and height without stretching it?
  16. Make flex items overlap
  17. HTML class attribute with spaces, it is a W3C valid class?
  18. Aligning elements left and center with flexbox
  19. How to set placeholder value using CSS?
  20. Changing the highlight color when selecting text in an HTML text input
  21. How to run the CSS3 animation to the end if the selector is not matching anymore?
  22. How to add button inside an input [closed]
  23. Progress Bar with HTML and CSS
  24. scrollable?
  25. Why aren’t my bootstrap 4 columns the same height?
  26. How To Add CSS3 Transition With HTML5 details/summary tag reveal?
  27. How to implement a Navbar Dropdown Hover in Bootstrap v4?
  28. Changing image src depending on screen size
  29. How do I get placeholder text in firefox and other browsers that don’t support the html5 tag option?
  30. What is the best way to replace the file browse button in html?

Leave a Comment