0

我试图弄清楚为什么在我的代码中，当我的分辨率约为 400 像素时，浏览器正在加载大小图像。如果我的分辨率很小，我只需要加载小图像，对吗？即使在视网膜显示中，它也应该加载中等图像。

在过去的几个小时里，我一直在努力研究这个。

<img    
    srcset="https://s18.postimg.org/t9xyf7mix/small.jpg  320w,
            https://s18.postimg.org/w5b1m2qix/medium.jpg 640w,
            https://s18.postimg.org/ues0kl8zt/large.jpg  1024w" 

    sizes= "(min-width: 1024px) 50vw,
            (min-width:  640px) 50vw,
            (min-width:  320px) 50vw"

    src="https://s18.postimg.org/t9xyf7mix/small.jpg"
    alt="Test image behavior" 
/>

链接到 JSFiddle：https ://jsfiddle.net/italoborges/v8yftgj2/2/

我究竟做错了什么？

谢谢。

4

1 回答 1

1

这是一个很好的解释和演示这个决策背后的数学：
https ://css-tricks.com/responsive-images-youre-just-changing-resolutions-use-srcset/

另外，在这里你可以找到一个很好的自动响应断点生成器，它使用高级分析来为特定图像提取最佳优化的断点集：
http ://www.responsivebreakpoints.com/

于 2016-04-03T11:32:32.113 回答