sizes 屬性沒有像我期望的那樣對源元素起作用
[英]The sizes property is not working as I expect for the source element
問題描述
我試圖讓粉紅色的花朵以 100% 的比例填充視口的寬度。 但是，sizes 屬性無法實現這一點。 我該如何糾正？
<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>
1 個解決方案
解決方案1
0 已采納 2021-05-21 01:14:41
來自https://developer.mozilla.org/en-US/docs/Web/HTML/Element/source
"sizes" 是一個源尺寸列表，描述了源所代表的圖像的最終渲染寬度。 每個源大小都包含一個以逗號分隔的媒體條件長度對列表。 瀏覽器使用此信息在布局頁面之前確定要使用 srcset 中定義的圖像。 請注意，只有當寬度尺寸描述符與 srcset 而不是像素比值一起提供時，尺寸才會起作用（例如，200w 而不是 2x）。 只有當元素是元素的直接子元素時，sizes 屬性才有效。
您可以使用屬性<... 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>
transform-origin屬性對不同的文本大小有不同的作用
[英]transform-origin property working differently on different text sizes
為什么“img”元素中的“srcset”和“sizes”屬性不能正常工作？
[英]Why are the “srcset” and “sizes” attributes in the “img” element not working the way they should?
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.