Question

<img src="/images/photo-236x61.png" srcset="/images/photo-170x44.png 170w, 
/images/photo-236x61.png 236w, 
/images/photo-300x72.png 300w, 
/images/photo-472x121.png 472w, 
/images/photo-600x154.png 600w, 
/images/photo-943x242.png 943w" 
sizes="(min-width: 1341px) 450px, 
(min-width: 1181px) 400px, 
(min-width: 961px) 350px, 
(min-width: 881px) 325px, 
(min-width: 801px) 300px, 
(min-width: 721px) 250px, 
(min-width: 561px) 220px, 
(min-width: 481px) 200px, 
(min-width: 401px) 170px, 
(min-width: 321px) 150px, 
(min-width: 160px) 130px, 
calc(100vw - 30px)" alt="My Photo">

我有上面的图像，根据设计师如何连接东西，有相当数量的不同尺寸。但是，我遇到了奇怪的问题，其中srscset总是想要选择比它需要的更大的图像。例如，当视口宽度为420px时，它会选择更大的300px宽度图像，而不是更接近匹配所提供的srcset宽度的较小图像。不确定为什么查询不会导致它在不同的场景中选择正确的大小。任何人都有任何想法如何知道浏览器选择什么以及为什么？

Answer 1

srcset 定义图像列表以及每个图像的大小（图像的实际大小）。该指令允许浏览器在它们之间进行选择。

尺寸定义了一组媒体条件（例如屏幕宽度），并指出当某些媒体条件为真时，最佳选择的图像尺寸。

尺寸顺序规则很重要，因为浏览器会在第一个匹配条件之后忽略所有内容，所以我认为这里的问题应该是顺序。

当视口宽度为420px时，第一个尺寸条件告诉：＆＃34;当视口宽度为1341像素或更少时加载 srcset 中引用的图像与所选插槽大小最匹配的列表（450px）＆＃34;。

此条件为真，因此，浏览器会选择与尺寸条件匹配的 srcset 图片：/images/photo-300x72.png 300w。

以下是关于响应式图片如何工作的useful article。

为什么没有srcset选择更接近视口大小的较小图像

1 个答案: