html - 图像 srcset 定义未按预期工作

Question

我正在尝试根据设备的视口显示不同的图像尺寸。在我的具体情况下，我想为小于 600 像素的视口显示一个小图像，为大于 600 像素的视口显示一个更大的图像。

这是我想出但似乎不起作用的代码：

<IMG srcset="small.png 400w, big.png 700w" sizes="(max-width: 600px) 400px, 700px" src="big.png" width="700" height="932" border="0" class="expimgbanners" alt="Let It Be">

我已经使用不同的设备和 Chrome 开发者工具对其进行了测试，但无论视口大小，我总是得到显示的大图像（名为 big.png 的图像）。

这是一个活生生的例子： https ://www.virtualsheetmusic.com/test-img.html

有任何想法吗？

标签： htmlcss

Answer 1

您的代码运行良好。

我想你可能测试错了。检查您的开发工具中的 DPR 设置：

确保其设置为“1”：

使用该设置后，您会发现一切正常：

<=600 像素

601px 向上：