Search code examples
cssimageaspect-ratio

How to force image resize and keep aspect ratio?

I am working with images, and I ran into 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 a CSS rule for images:

img {
    max-width: 500px;
}

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

Solution 

  • 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="https://i.sstatic.net/aEEkn.png">

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