Responsive images with fixed height CSS

Question

I want to fit an image in a div which has a fixed height and the image should expand to 100% without messing with the aspect ratio and also want the image to be responsive. I tried this,

img{
    height:500px;
    width:100%;
  }

This messes the aspect ratio. How can I fix that?

Answer 1

You can do it with CSS object-fit:

img {
  width: 100%;
  height: 500px;
  object-fit: cover;
}

Or contain depends on your needs.