css - 图片 srcSet 元素是否可以像 img 标签一样拉伸(stretch) 100%？

Question

我总是可以将图像拉伸(stretch)到 100% 宽度。

我正在对图片进行同样的尝试，但它不起作用。我查看了 MDN，它什么也没说。

虽然我似乎无法理解为什么会这样，所以我可能做错了，也许其他一些 CSS 规则会起作用。我很难用谷歌搜索它，因为我不断得到拉伸(stretch)图片的结果，如果这是一个常见问题，我深表歉意。

这是我正在使用的标签

<picture class="my-image">
  <source srcSet="src" media="(min-width:960px)"/>
  <img srcSet="src" />
</picture>

my-image 类在这里不起作用。

Answer 1

你误用了 <picture>标签，例如里面的图像将保留 src元素，但是 <source>如果满足规则，标签将优先显示。

.my-image {
  width: 100%;
}
.my-image img {
  width: 100%;
}

<picture class="my-image">
  <source srcset="https://img.gawkerassets.com/post/17/2012/08/1230-everyanything.png" media="(min-width: 900px)"/>
    <source srcset="https://img.gawkerassets.com/post/17/2012/08/1230-everyanything.png" media="(max-width: 400px)"/>
 
   <img src="https://3.bp.blogspot.com/_Y8u09A7q7DU/S-o0pf4EqwI/AAAAAAAAFHI/PdRKv8iaq70/s1600/id-do-anything-logo.jpg"/>
  
</picture>