Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Limit the height of a responsive image with css

My end goal is to have a fluid <img> 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.

like image 644
RobW Avatar asked Nov 29 '12 19:11

RobW


People also ask

How do I reduce the height of an image in CSS?

We can resize the image by specifying the width and height of an image. A common solution is to use the max-width: 100%; and height: auto; so that large images do not exceed the width of their container. The max-width and max-height properties of CSS works better, but they are not supported in many browsers.

How do you handle height in responsive design?

For the height of a div to be responsive, it must be inside a parent element with a defined height to derive it's relative height from. If you set the height of the container holding the image and text box on the right, you can subsequently set the heights of its two children to be something like 75% and 25%.

How do you make width and height responsive?

This can be achieved by giving the element height:0 and padding-bottom:30% . In all browsers, when padding is specified in %, it's calculated relative to the parent element's width. This can be a very useful feature for Responsive Design.

How do I make an image fit in a div responsive?

Answer: Use the CSS max-width Property You can simply use the CSS max-width property to auto-resize a large image so that it can fit into a smaller width <div> container while maintaining its aspect ratio.


1 Answers

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/

like image 149
KatieK Avatar answered Sep 22 '22 07:09

KatieK