Объектная привязка: обложка и Srcset

Я использую object-fit: cover на кучу изображений. Рамка для изображения занимает 50vw и имеет динамическую высоту. Атрибут обложки работает отлично, но это означает, что я действительно не знаю, насколько широкий мой фактический образ будет в данный момент.

Скорее всего, он будет шире, чем 50vw, и его переполнение будет скрыто из-за обложки объекта.

Проблема возникает, когда я пытаюсь использовать srcset. Я не могу дать надежную ширину для атрибута размеров.

Я знаю, что размер нужен только в приближении, но мне любопытно, с кем раньше это делалось.

Ответ 1

Не уверен, но это то, что я делаю почти для всех моих динамических изображений:

Я делаю <div> и делаю его любого размера, который я хочу, и устанавливаю встроенное изображение как bg div (вызывая большинство шаблонных языков, которые вы не можете установить в CSS).

.ratio {
  width: 50vw;
}

.ratio-4-3 {
  padding-top: 75%;
}

.vh-100 {
  height: 100vh;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
<div class="d-flex">
  <div class="flex-child">
    <div class="ratio ratio-4-3"style="background: url('https://i.cdn.turner.com/adultswim/big/img/2018/05/07/rick-and-morty.jpg')no-repeat center center; background-size: cover;"></div>
  </div>
  
    <div class="flex-child">
    <div class="ratio vh-100"style="background: url('https://cnet3.cbsistatic.com/img/NMPqQxi-Gbz3JS9Q1BpqpMfG-AQ=/1600x900/2017/03/24/80d3cf97-5aae-4750-b856-53c89005dbc1/rickandmorty3.jpg')no-repeat center center; background-size: cover;"></div>
  </div>
  
</div>

Ответ 2

Вот мой ответ на проблему, с которой я столкнулся с динамическими изображениями и сохранением пропорций с помощью подгонки объекта: cover:

Исправление IE и Edge для подгонки объекта: обложка;

Я надеюсь, что это может кому-то помочь.