实现动态宽度、静态高度和DPR感知的响应式图像
对于网站上的每个帖子，都会有一个标题图像。该图像的宽度为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版本。
假设我有一部带有320px-wide视窗的2x手机(例如iPhone 5)。我希望浏览器加载xs_2x.jpg。同样，假设我有一台带有宽屏显示器的1x桌面。我希望浏览器加载lg.jpg。
但现在假设我有一部更大的手机，一部带有3x、414px-wide视口的手机(即iPhone 6Plus)。在这种情况下，我希望我的浏览器加载sm_3x.jpg。但是，我的浏览器可能会加载sm_2x.jpg，因为sm_2x.jpg的宽度(1536像素)更接近手机的宽度(1242像素)，而不是sm_3x.jpg的宽度(2304像素)。这将导致设备上的图像不是300px高的，这违反了网站的要求。
如何实现动态宽度、静态高度、DPR感知的响应图像？
Stack Overflow用户
发布于 2015-02-11 15:41:58
您应该考虑到JPEG图像分辨率(DPI)对于屏幕没有意义。这里的主要内容是像素的总水平/垂直计数。
因此，1x、2x和3x版本的图像将是(根据设备宽度！)：
因此1x显示器和3x iPhone需要相同的图像(1920x300px)，它在资源集中的代码是img_name_1920px.jpg 1920w
<img srcset="img_name_1920px.jpg 1920w, img_name_1136px.jpg 1136w, img_name_768px.jpg 768w, img_name_320px.jpg 320w" sizes="100vw" src="img_name.jpg">注意:如果您使用的是屏幕宽度为320px的设备，并且是1x (非视网膜)显示器，则应使用宽度为320px的图像。
在这里，只有像素的总数才是重要的。
https://stackoverflow.com/questions/28225583
复制相似问题
腾讯云开发者
