moonvader moonvader - 3 months ago 24
CSS Question

CSS force image resize and keep aspect ratio

I am working with images, and I ran across a problem with aspect ratios.

<img src="big_image.jpg" width="900" height="600" alt="" />


As you can see,
height
and
width
are already specified. I added CSS rule for images:

img {
max-width:500px;
}


But for
big_image.jpg
, I receive
width=500
and
height=600
. How I can set images to be re-sized, while keeping their aspect ratios.

Answer

img {
  display: block;
  max-width:230px;
  max-height:95px;
  width: auto;
  height: auto;
}
<p>This image is originally 400x400 pixels, but should get resized by the CSS:</p>
<img width="400" height="400" src="http://i.stack.imgur.com/aEEkn.png">

This will make image shrink if it's too big for specified area (as downside, it will not enlarge image).