对于网站上的每个帖子,都会有一个标题图片。此图像的宽度为 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 敏感的响应式图像?
最佳答案
background-size: 100% cover;
这应该有效。
编辑: 之所以可行,原因很简单,因为您可以单独在 CSS 中完成。背景大小将覆盖可用空间,请参阅文章:http://davidwalsh.name/background-size
创建一个 css 类:.img-resp { background-size: 100% cover; }
然后将其应用于您的元素。
关于html - 实现具有动态宽度、静态高度和 DPR 意识的响应式图像,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/28225583/