Limit the height of a responsive image with css

Question

My end goal is to have a fluid  lt img gt  that won t expand past an explicitly set height of a parent grandparent element using only css    Currently I m doing this with a normal  max-width 100  height auto   fluid image and javascript by reading the height width attributes from the img tag  calculating the aspect ratio  calculating the correct width of the image at the desired height restriction  and applying that width as a max-width on the image s container element  Pretty simple  but I d love to be able to do it without javascript   height 100   width auto  doesn t work the same as its transverse  and I ve made some attempts with Unc Dave s ol  padded box and absolute positioning that function but require knowing the aspect ratio of the image beforehand and therefore cannot be applied across images that have different proportions  So the final requirement is the css must be proportion agnostic    I know  I know  the answer to this question is probably sitting next to the unicorn farm  but I thought I d throw it out there anyways

User · Accepted Answer

The trick is to add both max-height  100   and max-width  100   to  container img   Example CSS    container     width  300px    border  dashed blue 1px      container img     max-height  100     max-width  100       In this way  you can vary the specified width of  container in whatever way you want  200px or 10  for example   and the image will be no larger than its natural dimensions    You could specify pixels instead of 100  if you didn t want to rely on the natural size of the image    Here s the whole fiddle  http   jsfiddle net KatieK Su28P 1

User · Answer

I set the below 3 styles to my img tag  max-height  500px  height  70   width  auto    What it does that for desktop screen img doesn t grow beyond 500px but for small mobile screens  it will shrink to 70  of the outer container  Works like a charm     It also works width property

User · Answer

You can use inline styling to limit the height      lt img src    class  img-responsive  alt    style  max-height  400px   gt

[css] Limit the height of a responsive image with css

Examples related to css

Examples related to responsive-design