sizes 属性没有像我期望的那样对源元素起作用

Question

I am trying to make the pink flowers fill the width of the viewport at 100%.我试图让粉红色的花朵以 100% 的比例填充视口的宽度。 However, the sizes property is not working to accomplish this.但是，sizes 属性无法实现这一点。 How can I correct this?我该如何纠正？

 <h1>The picture element</h1> <p>Resize the browser window to load different images. w</p> <picture> <source media="(min-width:650px)" srcset="https://www.w3schools.com/tags/img_pink_flowers.jpg" sizes="100vw"> <source media="(min-width:465px)" srcset="https://www.w3schools.com/tags/img_white_flower.jpg"> <img src="https://www.w3schools.com/tags/img_orange_flowers.jpg" alt="Flowers" style="width:auto;"> </picture>

Answer 1

From https://developer.mozilla.org/en-US/docs/Web/HTML/Element/source来自https://developer.mozilla.org/en-US/docs/Web/HTML/Element/source

"sizes" Is a list of source sizes that describes the final rendered width of the image represented by the source. "sizes" 是一个源尺寸列表，描述了源所代表的图像的最终渲染宽度。 Each source size consists of a comma-separated list of media condition-length pairs.每个源大小都包含一个以逗号分隔的媒体条件长度对列表。 This information is used by the browser to determine, before laying the page out, which image defined in srcset to use.浏览器使用此信息在布局页面之前确定要使用 srcset 中定义的图像。 Please note that sizes will have its effect only if width dimension descriptors are provided with srcset instead of pixel ratio values (200w instead of 2x for example).请注意，只有当宽度尺寸描述符与 srcset 而不是像素比值一起提供时，尺寸才会起作用（例如，200w 而不是 2x）。 The sizes attribute has an effect only when the element is the direct child of a element.只有当元素是元素的直接子元素时，sizes 属性才有效。

You can make it work using the attribute <... style="width: 100vw;"> .您可以使用属性<... style="width: 100vw;">使其工作。

I added a working example, didn't knew which of the 3 flowers you wanted to make big so I added it to all of them.我添加了一个工作示例，不知道您想让 3 朵花中的哪朵变大，所以我将它添加到所有花中。

 <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1.0"> </head> <body> <h1>The picture element</h1> <p>Resize the browser window to load different images. w</p> <picture> <source media="(min-width:650px)" srcset="https://www.w3schools.com/tags/img_pink_flowers.jpg" style="width: 100vw;"> <source media="(min-width:465px)" srcset="https://www.w3schools.com/tags/img_white_flower.jpg" style="width: 100vw;"> <img src="https://www.w3schools.com/tags/img_orange_flowers.jpg" alt="Flowers" style="width: 100vw;"> </picture> </body> </html>

sizes 属性没有像我期望的那样对源元素起作用

问题描述

1 个解决方案

解决方案1
0 已采纳 2021-05-21 01:14:41

sizes 属性没有像我期望的那样对源元素起作用

问题描述

1 个解决方案

解决方案1 0 已采纳 2021-05-21 01:14:41

解决方案1
0 已采纳 2021-05-21 01:14:41