Image Srcset 到底是如何工作的？

Question

我创建了一个简单的例子来说明我目前的经历。

永远不会加载 160 像素的图片。
当我将宽度改为147px时加载 320px 图像。
当我将宽度更改为 227px 时 640px 图片已加载。
当我将宽度更改为 453px 和 1280px 时图片已加载。

我本来以为160px的图片会加载到浏览器的宽度大于160px，320px的图片会加载到浏览器的宽度大于320px等等。

为什么不是这样？

编辑：看起来 Whosebug 不是测试此示例的好地方。您可能必须将代码复制粘贴到您自己的浏览器中才能复制不同的浏览器尺寸。

    window.onresize = displayWindowSize;
    window.onload = displayWindowSize;

    function displayWindowSize() {
        myWidth = window.innerWidth;
        myHeight = window.innerHeight;
        // your size calculation code here
        document.getElementById("dimensions").innerHTML = "Current screen width: " + myWidth + "px";
    };

 <div id="dimensions"></div>
 <img src="http://imgur.com/z5X66tR"
      srcset="http://imgur.com/z5X66tR.png 160w, 
               http://imgur.com/kPOTVv7.png 320w, 
               http://imgur.com/xj9RPrV.png 640w, 
               http://imgur.com/PgJsD95.png 1280w">

Answer 1

听起来您的屏幕是 2x，并且您的浏览器正在按尺寸的几何平均值翻转。

回想一下，w 数字只是以图像像素为单位的图像宽度，而不是关于浏览器 window 大小或类似内容的命令。使用 sizes 中的大小（默认为 100vw），您可以将 w 数字转换为等效的 x 数字。例如，当您的屏幕为 320px 宽时，您的四种尺寸相当于 .5x、1x、2x、4x。如果你有一个 2x 屏幕（现在是 macs 的默认屏幕），浏览器通常会更喜欢 2x 源，也就是你的 640w 源。

这解释了您的过渡编号。 320和640的几何平均值为452.5；您会注意到 227*2 是 454。640 和 1280 相同 - 几何平均值是 905，453*2 是 906。

Image Srcset 到底是如何工作的？

How Does Image Srcset Really Work?

html

javascript

css

image

srcset