为什么不是srcset选择较小的图像更接近视口尺寸

<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总是希望选择比所需更大的图像。例如，当视口宽度为420像素时，它将选取300px宽度的图像，而不是较小的那些图像，这些图像与所提供的srcset宽度更接近。不知道为什么查询不会导致它在不同情况下选择正确的大小。任何人有任何想法如何知道浏览器选择什么，为什么？为什么不是srcset选择较小的图像更接近视口尺寸

来源

2017-08-14 R. Burn

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

尺寸定义了一组媒体条件（例如屏幕宽度），并且指示哪些图像尺寸将是最好的选择，当一定的媒体条件都为真。

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

当视口是在420PX宽，第一尺寸条件告诉：“当视口宽度为1341个像素或更少负载在srcset列表所选择的时隙大小最紧密匹配参考的图像（450像素） ”。

这种情况是真正的终端的话，浏览器会选择srcset图像：/images/photo-300x72.png 300w匹配尺寸是条件。

这是关于响应式图像如何工作的useful article。

来源

2017-09-03 11:58:04 Lety

部分原因可能是它，但经过多次阅读后，它会出现它是触发它选择较大图像的像素密度。像手机这样的小型设备在某些情况下通常具有比例2甚至3的像素密度。这意味着手机的像素宽度仅为400px，其密度为2，因此它会转向800px宽度的图像，以便它可以呈现更清晰的图像。似乎如果我想强制一个更小的图像超出某些媒体查询im更好地使用图片元素。 –

是的，你说的是真实的，一旦订单得到纠正，它就像你描述的一样。浏览器选择最接近宽度*像素密度的图像，并将其大小调整为匹配尺寸规则中指示的宽度。 – Lety

为什么不是srcset选择较小的图像更接近视口尺寸

回答

相关问题