如何使 <picture> 元素具有响应性

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%;
}

此外，您还有一个 container，其属性 width 为 70rem。

您应该像这样将属性宽度更改为最大宽度：

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