Question

我正在试图找出为什么在我的代码中，当我的分辨率大约为400px时，浏览器正在加载大小图像。如果我的分辨率很小，我只需要加载小图像吧？即使在视网膜显示器中，也应加载介质图像。

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

<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/

我做错了什么？

感谢。

Answer 1

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

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

使用srcset和大小的响应式图像

1 个答案: