为什么“img”元素中的“srcset”和“sizes”属性不能正常工作？答案

【问题标题】：Why are the "srcset" and "sizes" attributes in the "img" element not working the way they should?为什么“img”元素中的“srcset”和“sizes”属性不能正常工作？
【发布时间】：2023-03-30 15:30:02
【问题描述】：

我很难理解<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 图像的分辨率大小添加了错误的数字会怎样？在我的示例中，我将 coffee 图像描述为 600w，将 mycat 图像描述为 800w。如果这些数字有误怎么办？

我很难理解的另一件事是，为什么这里使用sizes 属性来添加媒体条件？这不就是media 属性的用途吗？

mozilla.developers.org 和其他网站给出的解释是残酷的。请不要复制粘贴任何声称可以解释这一点的外部资源。他们不。我都看过了。

【问题讨论】：

标签： html

【解决方案1】：

当浏览器评估 srcset 时，它们考虑的不仅仅是 size 属性。虽然我不确定他们考虑的事项的完整列表，但我知道他们也会考虑屏幕像素密度。

在您的示例中，如果浏览器检测到 2 倍或更高的像素密度，它将尝试加载 1200 像素的图像来满足 600 像素的大小。由于不存在这样的大小，它使用可用的最大图像：mycat.jpg。

【讨论】：

【解决方案2】：

您的代码不起作用，因为您的代码不正确，因为如果您想将srcset 属性放入，则必须将其放入source 标记内，该标记应位于picture tag 标记内。尝试编写下面附加的代码。

<!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>

在上述代码中，如果屏幕分辨率/尺寸大于800px，则会显示mycat.jpg。

如果屏幕分辨率/尺寸在 600px 到 800px 之间，则将显示 coffee.jpg。

如果屏幕分辨率/尺寸小于600px，则会显示orange.jpg。

如果这不起作用评论您的问题，我会尽力帮助您。

【讨论】：

我问的不是图片元素，而是img元素中使用的srcset。再次阅读我的问题。 developer.mozilla.org/en-US/docs/Learn/HTML/… & developer.mozilla.org/en-US/docs/Web/HTML/Element/img 我正在学习 IMG 元素的 srcset 和 sizes 属性。不是图片元素。
@IloveCoffee 代码可能无法正常工作，因为许多浏览器不支持某些标签和属性，这可能是其中一个原因，另一个原因是您正在编码的 HTML 版本，因为 HTML5删除了许多标签。所以，检查这两种情况。而你想要做的事情，最流行和最常用的方法是使用<picture> 标签。
@IloveCoffee 嘿，快来看看我是否解决了你的问题，还是需要提高我的技能？
我已经就这个问题询问了另一个负责页面的人，我仍在等待答案。我不能说你是否帮助了我，因为 developer.mozilla 和 w3schools 都说这些属性应该可以工作。我不知道如何验证它们是否不再工作，或者问题是否出在我的代码中。
@IloveCoffee 你能帮我一个忙，只要你的问题得到解决，请发表评论，让我知道它是如何解决的。我很想知道您的问题是如何解决的。

【解决方案3】：

您必须将图像和来源放在图片标签中。

<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>

【讨论】：

我问的是“img”元素，而不是“picture”元素。请仔细阅读我的问题。
它不适用于图像元素，但如果您将图像元素放在图片元素中并添加来源，它就会起作用。