<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宽度的较小图像。不知道为什么在不同的情况下查询没有导致它选择正确的大小。有人知道如何知道浏览器选择什么和为什么吗？
1条答案
按热度按时间csbfibhn1#
srcset定义图像列表和每个图像的大小（图像的真实的大小）。此指令允许浏览器在它们之间进行选择。
尺寸定义一组介质条件（例如屏幕宽度），并指示在某些介质条件成立时最适合选择的图像尺寸。
大小顺序规则很重要，因为浏览器会忽略第一个匹配条件之后的所有内容，所以我认为这里的问题应该是顺序。
当 windows 为420px宽时，第一个大小条件告诉：“当 windows 宽度为1341像素或更大时，加载srcset列表中引用的与所选窗口大小（450px）最匹配的图像"。
为真的条件是：
屏幕密度可能至少为2（即2 * 170px = 340px），因此浏览器将选择srcsetimage：
/images/photo-300x72.png 300w，它们符合sizes条件。这里是一个useful article如何响应图像的工作。