object-fit on responsive image

Question

I have images that are 1000px wide by 250px high. I've made the images responsive/flexible by using

img { 
max-width:1000px; 
height:auto; 
}

All the images should be in this ratio of 1 to 1/4.

However the client will from now on be using a CMS to replace and update images. I have no control over the dimensions of these new images. The CMS isn't capable of scaling and cropping the new images to the required format. I have been told to use object:fit. Such as:

img { 
width:1000px;
height:250px;
object-fit:cover;
}

However these means the images are not responsive/flexible. Is there a way to keep the images responsive and for the ratio to stay the same?

I've tried the following but they don't work:

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

and

img {
max-width: 100%;
height: auto;
object-fit: cover;
}

I could use background images and the padding-bottom:25% trick, but I'd rather use images and alt tags.

user_8620333 · Answer

Update 2022

Now you can rely on aspect-ratio

img.responsive {
  width: 100%;
  aspect-ratio:4;
  object-fit: cover;
}

Old answer

You can combine the use of img and the padding trick. You only need to add an extra inline style for the background-image that you make the same as the src:

img {
  width: 100%;
  height: 0;
  padding-top: 25%;
  background-size: cover;
  background-position: center;
}

With a small JS code you can have this automatically:

$('.responsive').each(function() {
  $(this).css('background-image','url('+$(this).attr('src')+')');
})

img.responsive {
  width:100%;
  height:0;
  padding-top:25%;
  background-size:cover;
  background-position:center;
}

object-fit on responsive image

1 Answers