css - 防止标题背景图像在较大的视口(viewport)上变窄

我在网站的某些页面上有一个状态菜单作为标题，在较窄的视口上可以正常工作，但在较大的视口上，背景图像会被拉伸得太宽且变得太窄，因此状态菜单会消失在白色的主体中。

当视口变宽时，如何阻止背景图像变得太窄？
由于某种原因，尝试在CSS中使用最小高度似乎无法解决问题。

与html：

<header class="banner-header bg-light">
</header

和CSS

.banner-header {
  width: 100%;
  background: url("../images/navbar-header.svg") no-repeat center bottom;
  background-size: cover;
  min-height: 180px; }

在较小的视口上工作正常


在较大的视口上变窄


没有状态菜单的背景图片

最佳答案

尝试使用background-size在较大的屏幕上手动控制@media

有关@media here的更多信息

有关background-size here的更多信息

例如：

.banner-header {
  width: 100%;
  background: url("../images/navbar-header.svg") no-repeat center bottom;
  background-size: cover;
  min-height: 180px;
}
@media (min-width:1200px) {
  .banner-header {
    background-size: 1600px 300px;
  }
}

1600px是宽度，300px是高度。这些是占位符的价值，请选择最适合您的需求。

我希望这能帮到您！