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

Question

我正在努力理解<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属性来添加媒体条件？ 这不是media属性的用途吗？

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

Answer 1

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

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

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

在上面的代码中，如果屏幕分辨率/大小超过800 像素，则将显示 mycat.jpg 。

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

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

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

Answer 3

当浏览器评估 srcset 时，它们考虑的不仅仅是 size 属性。 虽然我不确定他们考虑的全部内容，但我知道他们也会考虑屏幕像素密度。

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

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

问题描述

3 个解决方案

解决方案1
0 2020-07-18 12:30:35

解决方案2
0 已采纳 2020-07-18 12:45:15

解决方案3
0 2020-12-01 19:15:19

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

问题描述

3 个解决方案

解决方案1 0 2020-07-18 12:30:35

解决方案2 0 已采纳 2020-07-18 12:45:15

解决方案3 0 2020-12-01 19:15:19

解决方案1
0 2020-07-18 12:30:35

解决方案2
0 已采纳 2020-07-18 12:45:15

解决方案3
0 2020-12-01 19:15:19