我很难理解“img”元素中的“srcset”和“sizes”属性。
首先，为什么我的代码不工作？
<img src="orange.jpg" alt="orange" srcset="coffee.jpg 600w, mycat.jpg 800w" sizes="(max-width:500px) 600px, 800px">
当我运行这段代码时，不管我将浏览器缩小多少，“mycat.jpg”图像都会加载。 为什么？
我认为这段代码的意思是，如果视口达到500px，那么应该加载600px的图像，这是咖啡图像；如果没有，那么应该加载800px的图像，这是mycat图像。 那么，为什么不管视口如何，mycat图像都要加载呢？
另外，如果浏览器根据大小的接近程度选择加载哪个srcset图像，那么在什么情况下加载src图像（橙色）？
另外，如果我为每个srcset图像的分辨率大小添加了一个错误的数字，会发生什么？ 在我的示例中，我将“咖啡”图像描述为“600W”，将“MyCat”图像描述为“800W”。 如果这些数字错了怎么办？
另一件我很难理解的事情是，为什么这里要使用“sizes”属性来添加介质条件？ 这不就是“媒体”属性的用意吗？
mozilla.developers.org和其他网站给出的解释是残暴的。 请不要复制粘贴任何声称解释这一点的外部来源。 他们没有。 我都见过了。
您必须将图像和源放在一个图片标签中。
null
<picture>
<source srcset="coffee.jpg 600w" sizes="(max-width:500px)">
<source srcset="mycat.jpg 800w" sizes="(max-width:600px)">
<img src="orange.jpg" alt="orange">
</picture>
您的代码无法工作，因为您的代码不正确，因为如果要将srcset属性放入source标记中，则必须将其放入picture标记中，而该标记应放入picture标记中。 请尝试编写下面所附的代码。
null
<!DOCTYPE html>
<html>
<head>
<title>srecset attribute</title>
</head>
<body>
<picture>
<source media="(min-width:800px)" srcset="mycat.jpg">
<source media="(min-width:600px)" srcset="coffee.jpg">
<img src="orange.jpg" alt="orange" style="width:auto;">
</picture>
</body>
</html>