背景图像被 'min height' 截断 - 如何解决？

Question

我有以下代码

.header-background {
    position: static;
    display: block;
    overflow: visible;
    top: 0;
    height: 100%;
    min-height: 750px;
    margin-bottom: 10px;
    padding-bottom: 10px;
    background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(50,58,69,0.9)));
    background-image: linear-gradient(180deg, rgba(50,58,69,0.55),  rgba(50,58,69,0.74)), url(images/Tra.png);
    flex-direction: column;
    background-position: 0px 0px, 50% 0%;
    background-size: auto, cover;
    white-space: normal;
    object-fit: fill;
    -o-object-fit: fill;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
}

生成以下内容（第一张图片是 13 英寸显示器，第二张图片是 24 英寸显示器）

我知道这个截止问题应该与 min-height 相关，但不太确定如何。图片本身比 13 英寸版本的 24 英寸屏幕显示的要大。有解决该问题的想法吗？

Answer 1

而不是 static 位置使用 fixed 位置，并将此 class 应用于分隔 html 文件中的 div 标记以适合背景图像你的整个屏幕。

.header-background {
    position: fixed;
    top: 0;
    left: 0;
    z-index: -10;
    height: 100%;
    width: 100%;
    background-size: cover;
    background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(50,58,69,0.9)));
    background-image: linear-gradient(180deg, rgba(50,58,69,0.55),  rgba(50,58,69,0.74)), url(images/Tra.png);
 }

然后在您的 html 文件中添加这个没有任何子项的标签。

<div class="header-background"></div>

Answer 2

尝试使用：

height: auto;
min-height: 100vh;

vh代表viewport height，所以它是header元素的最小高度，如果高度在某些情况下会更高“height:auto”会自动调整它。

对不起我的英语。

背景图像被 'min height' 截断 - 如何解决？

Background image gets cut off by 'min height' - how to fix that?

html

css

image

background

background-image