Question

即使大小媒体查询为false，<img>元素srcset属性也会始终选择较大的<img> src。

使用<picture>元素根据浏览器的宽度来强制选择图像非常有效。通过this answer，我了解到<picture>和<img> srcset属性的工作方式不同，<picture>元素可以根据规则执行图像选择，而<img> {{ 1}}决定了浏览器的选择。这可以根据屏幕像素密度，网络速度或浏览器采用的任何其他逻辑来确定。作为响应，我试图通过禁用Chrome浏览器的缓存来强制浏览器选择较小的图像，将浏览器的宽度缩小到800px媒体查询以下（大约300px以解决我的视网膜显示器2倍像素密度），甚至限制我自己与慢速3g网络的连接。尽管如此，Chrome还是选择了较大的800px图像。

到目前为止，这是我的srcset元素...

<img>

始终将<img src="/image-2.jpeg" srcset="/image-1.jpeg 800w, /image-2.jpeg 600w" sizes="(min-width: 800px) 800px, 600px" >用作/image-1.jpeg <img>属性。

Answer 1

对于提供的代码为什么不起作用，我只能看到三个可能的原因；

（1）。浏览器支持。
（2）。文件位置或文件名不匹配。
（3）。代码中指定的图像尺寸与图像尺寸不匹配。

使用以下代码段。这在Windows 10上的Firefox for Desktop中有效。

在调整浏览器窗口大小时，确认以下代码段是否适用于您的浏览器。如果不是这样，那么我们就有罪魁祸首。

如果可以，请检查以下内容：

->文件名（typos）
->文件扩展名（.jpeg，.jpg，.png等）
->图片位置（/image-1.jpeg）
->图片大小（大小不匹配）[没关系]

如果一切正常，则可能浏览器无法访问包含图像的文件夹。检查权限等。

<img src="https://picsum.photos/800/400?image=0"
 srcset="https://picsum.photos/800/400?image=0 800w,
         https://picsum.photos/700/350?image=1 700w,
         https://picsum.photos/600/300?image=2 600w,
         https://picsum.photos/500/250?image=3 500w,
         https://picsum.photos/400/200?image=4 400w,
         https://picsum.photos/300/150?image=5 300w,
         https://picsum.photos/200/100?image=6 200w,
         https://picsum.photos/150/75?image=7 150w,
         https://picsum.photos/100/50?image=8 100w"
 sizes="(min-width: 800px) 800px,
        (min-width: 700px) 700px,
        (min-width: 600px) 600px,
        (min-width: 500px) 500px,
        (min-width: 400px) 400px,
        (min-width: 300px) 300px,
        (min-width: 200px) 200px,
        (min-width: 150px) 150px,
        100px">

运行代码段并调整浏览器窗口的大小。

或者，您可以在CodePen上找到此代码。

我希望这会有所帮助。

和平

图Srcset属性未选择较小的图像

1 个答案: