如何使 <picture> 元素响应

Question

我花了好几个小时试图了解图片标签的确切工作原理。我可以结合使用 <picture> 标签和 <srcset> 在特定屏幕尺寸下加载不同的艺术指导，但我似乎无法找到如何使这些响应。

我给 <picture> 元素一个 class 命名为 .header-img。我尝试为 class 设置媒体查询并调整它的大小。但是当我尝试将宽度设置为 .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%;
}

此外，您有一个容器，属性宽度为 70rem。

您应该将属性宽度更改为最大宽度，如下所示：

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

如何使 <picture> 元素响应

How to make a <picture> element responsive

html

css

srcset

responsive