在CSS中模拟srcset
在CSS中模拟srcset
提问于 2016-09-28 05:27:23
我知道imageset等同于HTML的srcset属性。但是，current spec仅支持x像素密度单位，而不支持w和h大小单位。
例如：
<img srcset="high.jpg 2000w, medium.jpg 1200w, low.jpg 800w">如果我将浏览器窗口的大小调整到400px，Chrome会首先加载low.jpg。当我将窗口加宽时，它首先加载medium.jpg，然后加载high.jpg。切换点取决于我显示器的像素密度，所以我的视网膜Macbook在窗口大小为旧笔记本电脑的一半大小时加载更高分辨率的图像。
如何为CSS背景图像重现此行为？我开始时指定了一堆min-width和max-resolution媒体查询，但很快就变得乱七八糟。一定有更好的办法。如果可能的话，我愿意使用JS polyfill。
回答 2
Stack Overflow用户
发布于 2017-03-24 18:30:25
不幸的是，没有简单的方法(到目前为止？)以匹配CSS中的srcset-w功能。
你应该读一读这篇很棒的文章：https://css-tricks.com/responsive-images-css/
Stack Overflow用户
发布于 2016-09-28 07:07:12
CSS media查询：pixel ratio
或Picturefill
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/39734576
复制相关文章
相似问题
腾讯云开发者
