Question

我创建了一个快速示例，说明了我迄今为止的经历。

从不加载160px图像。
当我将宽度更改为147px时加载320px图像。
当我将宽度更改为227px时已加载640px图像。
当我将宽度更改为453px时，1280px 图像已加载。

我原以为160px图像会加载，直到浏览器的宽度大于160px，并且320px图像会加载，直到浏览器的宽度大于320px，等等。

为什么不是这样？

编辑：看起来stackoverflow不是测试此示例的好地方。您可能需要将代码复制粘贴到您自己的浏览器中以复制不同的浏览器大小。

＆＃13;

    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";
    };

＆＃13;

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

＆＃13;

Answer 1

听起来你有一个2倍的屏幕，你的浏览器正在翻转尺寸的几何平均值。

回想一下，w数字只是图像像素中图像的宽度，而不是关于浏览器窗口大小或类似内容的命令。使用sizes的大小（默认为100vw），您可以将w数转换为等效的x数。例如，当您的屏幕宽度为320px时，您的四种尺寸相当于.5x，1x，2x，4x。如果你有一个2x的屏幕（这些日子是mac的默认设置），那么浏览器通常会选择2x源，这是你的640x。

这解释了您的转换数字。 320和640的几何平均值为452.5;你会注意到227 * 2是454. 640和1280相同 - 几何平均值是905，而453 * 2是906。

Image Srcset如何真正起作用？

1 个答案: