Могу ли я сделать так, чтобы атрибуты <img>`srcset` /` sizes` учитывали мое использование `object-fit: cover`?

Question

При попытке реализовать полноценное фоновое изображение, я думаю, я обнаружил проблему с комбинированным использованием отзывчивых атрибутов img srcset / sizes и CSS object-fit: cover;.

* 1006.* Учитывая следующий простой тестовый пример:

<img class="background"
     srcset="//placehold.it/320x180 320w,
             //placehold.it/640x360 640w,
             //placehold.it/960x540 960w,
             //placehold.it/1280x720 1280w,
             //placehold.it/2560x1440 2560w"
     src="//placehold.it/320x180"
     sizes="100vw">

.background {
  position: absolute;
  display: block;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

(JSFiddle здесь ; изолированная страница результатов здесь )

Если область просмотраПо размеру напоминает портретный смартфон (например, до 320 × 568), браузер должен масштабировать изображение по вертикали, чтобы достичь «обложки».Это расширяет изображение за пределами области просмотра в горизонтальном измерении, однако (по крайней мере, в Chrome с отключенным кэшем †) из-за sizes='100vw' (и при его опускании, поскольку 100vw является значением по умолчанию), браузер по-прежнему выбирает источник наиболеесоответствует ширине области просмотра 320 пикселей, в результате чего получается пиксельное изображение :

Мне кажется, я понимаю, почему браузер делаетэто (сам элемент изображения по-прежнему имеет ширину 320 пикселей, независимо от видимого размера изображения), но для моего варианта использования это облом.

Единственный обходной путь, о котором я мог подумать, это "перегрузить" *Атрибут 1030 * для выбора источника с более высоким разрешением.Поскольку мои образцы изображений имеют формат 16: 9, я могу использовать простой расчет плюс orientation медиа-запрос, чтобы помочь браузеру понять ситуацию и указать желаемую ширину, используя динамические единицы:

<img class="background"
     srcset="//placehold.it/320x180 320w,
             //placehold.it/640x360 640w,
             ..."
     src="//placehold.it/320x180"
     sizes="(orientation: landscape) 100vw,
            calc(100vh / 9 * 16)">

(JSFiddle здесь ; страница изолированных результатов здесь )

Кажется, это работает, но мне не нравится полагаться на поддержкуorientation медиа-запрос, и я не уверен, что этот подход пуленепробиваемый даже с такой поддержкой.Это кажется немного хрупким.

Я что-то упустил?Это известная проблема?Сегодня я не смог найти упоминаний об этом конфликте.Если есть более надежный способ обойти это, я хотел бы услышать это.Спасибо!

† Если разрешено чтение из своего кэша, Chrome (и другие) будет использовать любой ранее загруженный источник с более высоким разрешением, что даст неточные результаты.