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

Question

在尝试实现全出血背景图像时，我认为我发现了响应式img srcset / sizes属性和CSS的{{1 }}。

给出以下简单测试用例：

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">

（JSFiddle here；单独的结果页面here）

如果视口的大小类似于人像智能手机（例如320×568），则浏览器必须垂直放大图像以实现“遮盖”。这会在水平方向上将图像扩展到视口之外，但是（至少在禁用了缓存功能的Chrome中†），因为.background { position: absolute; display: block; top: 0; right: 0; bottom: 0; left: 0; width: 100%; height: 100%; object-fit: cover; } （并且省略时，因为sizes='100vw'是默认设置），浏览器仍然选择最适合320像素视口宽度的源，从而生成像素化图像：

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

我能想到的唯一解决方法是“重载” 100vw属性以强制选择更高分辨率的信号源。因为我的示例图像是16：9，所以我可以使用简单的计算加上orientation媒体查询来帮助浏览器了解情况，并使用动态单位告诉它所需的宽度：

sizes

（JSFiddle here；单独的结果页面here）

这似乎可行，但是我不希望依靠对<img class="background" srcset="//placehold.it/320x180 320w, //placehold.it/640x360 640w, ..." src="//placehold.it/320x180" sizes="(orientation: landscape) 100vw, calc(100vh / 9 * 16)"> 媒体查询的支持，而且即使有这种支持，我也不相信这种方法是防弹的。似乎有点脆弱。

我想念什么吗？这是一个已知的问题？我今天在研究中找不到任何提及这种冲突的信息。如果有更健壮的方法来解决此问题，我很想听听。谢谢！

†如果允许从其缓存中读取内容，Chrome（和其他浏览器）将使用以前加载的任何高分辨率源，从而得出不准确的结果。

Answer 1

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

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