html - 我可以让 <img> `srcset`/`sizes` 属性考虑到我对 `object-fit: cover` 的使用吗？

Question

在尝试实现全出血背景图像时，我想我发现了与响应式 img 的组合使用的问题。 srcset/sizes属性和 CSS 的 object-fit: cover; .

给定以下简单的测试用例:

<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 here ；孤立的结果页面 here )

如果视口(viewport)的大小类似于纵向智能手机(例如，320×568)，浏览器必须垂直放大图像以实现“封面”。由于sizes='100vw'，这会将图像在水平维度上扩展到视口(viewport)之外(至少在禁用缓存的Chrome中†) (当省略它时，100vw 是默认值)浏览器仍然选择最适合 320px 视口(viewport)宽度的源，导致 像素化图像 :



我想我理解为什么浏览器会这样做(图像元素本身仍然是 320px 宽，无论图像的可见大小如何)，但对于我的用例来说，这是一个无赖。

我能想到的唯一解决方法是“重载”sizes。属性以强制选择更高分辨率的源。因为我的示例图像是 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 here ；孤立的结果页面 here )

这似乎可行，但我不喜欢依赖对 orientation 的支持。媒体查询，即使有这种支持，我也不相信这种方法是万无一失的。它似乎有点脆弱。

我错过了什么吗？这是一个已知的问题？在我今天的研究中，我还没有找到任何提到这个冲突的地方。如果有更强大的方法来解决这个问题，我很想听听。谢谢!

† 如果允许从其缓存中读取，Chrome(和其他)将使用之前加载的任何更高分辨率的源，从而给出不准确的结果。

Answer 1

而不是 orientation媒体查询，max-aspect-ratio在这种情况下必须使用媒体查询:

<img
    sizes="(max-aspect-ratio: 16 / 9) calc(100vh * 16 / 9), 100vw"
    srcset="…"
    …
>