Question

缩放图像很容易。

.container > img {
    width: 100%;
    height: auto;
}

不幸的是，以类似的方式在source标记内缩放picture不起作用。

.container > source {
    width: 100%;
    height: auto;
}

在<picture>标记内缩放图片的正确方法是什么？

在下面的示例中，如何将这两个图像缩放到浏览器宽度？

<div class="container">
     <picture>
        <source srcset="first-image.webp" type="image/webp">
        <img src="second-image.jpg"> 
     </picture>
</div>

Answer 1

显然你过分简化了问题中的HTML示例;图片只包含一个img，但你说“这两个图像”。所以我希望这对你有用。

解决方案是不要尝试定位源，而只是img。您确实需要正确编写选择器。

.container > picture > img {
    width: 100%;
    height: auto;
}

<div class="container">
     <picture>
        <source srcset="first-image.webp" type="image/webp">
        <img src="second-image.jpg"> 
     </picture>
</div>

顺便说一句，在这里使用<figure>代替<div class="container">更具语义性。

Answer 2

你可以使用像

这样的媒体元素

media =＆＃34;（min-width：650px）＆＃34;在源

来源 - https://www.w3schools.com/tags/tag_picture.asp

在PICTURE标签内缩放图像的正确方法是什么？

2 个答案: