соответствие объекта на адаптивном изображении

Question

У меня есть изображения шириной 1000 пикселей и высотой 250 пикселей. Я сделал изображения адаптивными / гибкими, используя

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

Все изображения должны быть в соотношении 1 к 1/4.

Однако с этого момента клиент будет использовать CMS для замены и обновления изображений. Я не могу контролировать размеры этих новых изображений. CMS не может масштабировать и обрезать новые изображения до нужного формата. Мне сказали использовать object:fit. Например:

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

Однако это означает, что изображения не являются адаптивными / гибкими. Есть ли способ сохранить отзывчивость изображений и неизменное соотношение сторон?

Я пробовал следующее, но они не работают:

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

и

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

Я мог бы использовать фоновые изображения и трюк padding-bottom:25%, но я бы предпочел использовать изображения и теги alt.

Answer 1

Вы можете комбинировать использование img и трюка с заполнением. Вам нужно только добавить дополнительный встроенный стиль для фонового изображения, которое вы делаете таким же, как sr c:

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

<img src="https://i.picsum.photos/id/1000/1000/1000.jpg" style="background-image:url(https://i.picsum.photos/id/1000/1000/1000.jpg)" alt="image">

С маленьким кодом JS вы можете получить это автоматически:

$('.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;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<img src="https://i.picsum.photos/id/1000/1000/1000.jpg"  alt="image" class="responsive">
<img src="https://i.picsum.photos/id/1074/1000/1000.jpg"  alt="image" class="responsive">