CSS force image resize and keep aspect ratio

Question

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.

Answer 1

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).

Answer 2

I've struggled with this problem quite hard, and eventually arrived at this simple solution:

object-fit: cover; width: 100%; height: 250px; 

You can adjust the width and height to fit your needs, and the object-fit property will do the cropping for you.

More information about the possible values for the object-fit property and a compatibility table are available here: https://developer.mozilla.org/en-US/docs/Web/CSS/object-fit

Cheers.