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

Question

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

p>

当视口(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; }

在较小的视口(viewport)上工作正常

在较大的视口(viewport)上变窄

没有状态菜单的背景图片

Answer 1

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

关于 @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 是高度。这些是占位符值，请选择最适合您需求的值。

希望对您有所帮助!