防止标题背景图像在较大的视口上变窄
防止标题背景图像在较大的视口上变窄
提问于 2019-03-15 06:07:36
我在我的网站上的某些页面上有一个状态菜单作为标题，它在较窄的视口上工作得很好，但在较大的视口上，背景图像太宽，变得太窄，所以状态菜单消失在白色的主体中。
当视口变宽时，如何阻止背景图像变得太窄？由于某些原因，在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; }在较小的视口上工作正常
在较大的视口上缩小
没有状态菜单的背景图像
回答 1
Stack Overflow用户
回答已采纳
发布于 2019-03-15 07:01:19
尝试使用@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是width，300px是height。这些都是占位符的值，选择最适合您需要的。
我希望这能对你有所帮助！
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/55172734
复制相关文章
相似问题