Question

我一直在努力尝试了解图片标签的工作原理。我可以结合使用<picture>标签和<srcset>在特定的屏幕尺寸上加载不同的艺术指导，但是我似乎找不到如何使它们响应的方式。

我为<picture>元素提供了一个名为.header-img的类。我试图为该类设置媒体查询并调整其大小。但是，当我尝试将宽度设置为.header-img时，宽度不会改变。

也许是一个重要的细节，<picture>元素位于grid内

 <picture class="header-img">
                <source media="(max-width: 500px)" srcset="./assets/img/header/header-bg-sm.png">
                <source media="(max-width: 1100px)" srcset="./assets/img/header/header-bg-md.png">
                <source media="(max-width: 1300px)" srcset="./assets/img/header/header-bg-lg.png">
                <img src="./assets/img/header/header-bg-lg.png" alt="ISB header">
 </picture>

真的很感谢任何帮助！

Answer 1

将此添加到CSS：

.header-img img {
    max-width: 100%;
}

而且，您有一个容器，其属性 width 为70rem。

您应将属性width更改为max-width，如下所示：

.container {
    max-width: 70rem;
    ...
}

如何使<picture>元素响应

1 个答案: