CSS: 100% width or height while keeping aspect ratio?

css image height width
Weston Watson picture Weston Watson · Sep 20, 2010 · Viewed 463.2k times · Source

Currently, with STYLE, I can use width: 100% and auto on the height (or vice versa), but I still can't constrain the image into a specific position, either being too wide or too tall, respectively.

Any ideas?

Answer

Andrew picture Andrew · Sep 20, 2010

If you only define one dimension on an image the image aspect ratio will always be preserved.

Is the issue that the image is bigger/taller than you prefer?

You could put it inside a DIV that is set to the maximum height/width that you want for the image, and then set overflow:hidden. That would crop anything beyond what you want.

If an image is 100% wide and height:auto and you think it's too tall, that is specifically because the aspect ratio is preserved. You'll need to crop, or to change the aspect ratio.

Please provide some more information about what you're specifically trying to accomplish and I'll try to help more!

--- EDIT BASED ON FEEDBACK ---

Are you familiar with the max-width and max-height properties? You could always set those instead. If you don't set any minimum and you set a max height and width then your image will not be distorted (aspect ratio will be preserved) and it will not be any larger than whichever dimension is longest and hits its max.

Related questions

Wrong height of div with img tag inside

I have a div with an image tag inside, and the div height appears to be a little larger than the image. I could fix this problem by setting a specific height for the div (the same as the image), …

Read More
Image stretching in flexbox in Safari

This is only an issue in Safari and looks like a Safari bug to me. Here is a fiddle with a simplified version of the issue. When an image is in a nested flexbox element with a width set and …

Read More
How do I auto-resize an image to fit a 'div' container?

How do you auto-resize a large image so that it will fit into a smaller width div container whilst maintaining its width:height ratio? Example: stackoverflow.com - when an image is inserted onto the editor panel and the image …

Read More