使用媒体查询针对不同屏幕大小更改背景图像在较小屏幕上不起作用

Question

我有两个不同的图像。我正在尝试将其中一个图像用于小屏幕，另一个用于大屏幕。

大屏幕尺寸的图像被显示，但是小屏幕尺寸的不被显示。

我觉得我做错了什么，希望能找到解决办法。

index.html

<img loading="lazy" class="bg-big-image bg-small-image h-100" />

style.css

.bg-big-image {
background-image: url(path_to_image("[e-mail]"));
width: 100%;
height: 100%;
background-size: cover;
}
@media only screen and (min-width: 992px) {
.bg-small-image {
background-image: url(path_to_image("Groupe de masques 20.jpg"));
width: 100%;
height: 100%;
background-size: cover;
}
}

Answer 1

您应该将媒体屏幕中的最小宽度更改为最大宽度，因为您定义的第二个图像只显示在大于992px的屏幕上。您的css代码应该是这样的：

@media only screen and (max-width: 992px) {
.bg-small-image {
background-image: url(path_to_image("Groupe de masques 20.jpg"));
width: 100%;
height: 100%;
background-size: cover;
}
}