大小属性未按我对源元素的预期工作

Question

我正在尝试让粉红色的花朵以 100% 的比例填充视口的宽度。但是，大小属性无法实现此目的。我该如何纠正？

<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

来自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. 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. 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). The sizes attribute has an effect only when the element is the direct child of a element.

您可以使用 <... style="width: 100vw;"> 属性使其工作。

我添加了一个工作示例，不知道你想要制作大的 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>

大小 属性 未按我对源元素的预期工作

The sizes property is not working as I expect for the source element

html

srcset

大小属性未按我对源元素的预期工作