I am trying to make the pink flowers fill the width of the viewport at 100%. However, the sizes property is not working to accomplish this. 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>From 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.
You can make it work using the attribute <... 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.
<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>