html - 实现具有动态宽度、静态高度和 DPR 意识的响应式图像

Question

对于网站上的每个帖子，都会有一个标题图片。此图像的宽度为 100vw，高度为 300px。我想通过 img 标签的 srcset 属性或完整的 picture 元素(不确定在这一点上，因此这个问题)。

使用 srcset 属性这样做会很容易:

<img srcset="lg.jpg 1200w, md.jpg 992w, sm.jpg 768w, xs.jpg 320w" sizes="100vw" src="xs.jpg">

当我想考虑不同的设备像素比时，问题就出现了。首先，假设我有上面 srcset 中列出的所有图像的 2x 和 3x 版本。

假设我有一部 2x 手机，其视口(viewport)为 320px(例如 iPhone 5)。我希望浏览器加载 xs_2x.jpg。同样，假设我有一个带宽屏显示器的 1x 桌面。我希望浏览器加载 lg.jpg。

但现在假设我有一部更大的手机，一部有 3x、414px 宽视口(viewport)(即 iPhone 6 Plus)。在这种情况下，我希望我的浏览器加载 sm_3x.jpg。但是，我的浏览器可能会加载 sm_2x.jpg，因为 sm_2x.jpg 的宽度(1536 像素)比手机的宽度(1242 像素)更接近手机的宽度sm_3x.jpg 的宽度(2304 像素)。这会导致设备上的图像不是 300px 高，违反了网站的要求。

如何实现动态宽度、静态高度、DPR 敏感的响应式图像？

Answer 1

background-size: 100% cover;

这应该有效。

编辑:之所以可行，原因很简单，因为您可以单独在 CSS 中完成。背景大小将覆盖可用空间，请参阅文章:http://davidwalsh.name/background-size

创建一个 css 类:.img-resp { background-size: 100% cover; } 然后将其应用于您的元素。