html - 背景大小 :contain on my hero image 遇到一些问题

Question

试图将主图放在一起，但当我使用 background-size:contain 时，我的图像似乎会重复出现，如下面的屏幕截图所示:

问题是，如果我使用 background-repeat:no-repeat 它会这样做

所有我想做的就是有一个 75vh 的英雄形象，该形象显示完整。不确定我做错了什么，但我已经很久没有接触 CSS 了。

HTML

<div class='header'>
    <div class='header__navbar'>

        <div class=header__navbar-media>
            <!-- used for first block to center logo -->
        </div>

        <div class='header__navbar-logo'>
            <a href="/"><img src="../img/logo-lospallos22.png" class='header__navbar-logo-img'></a>

        </div>

        <div class='header__navbar-order'>
            <div class='header__navbar-order-account'>
                <a href="#" class='login-nav'>Login</a>
                <a href="#" class='login-nav'>|</a>
                <a href="#" class='login-nav'>Register</a>
            </div>
            <a href='#' class='btn btn__orderButton'> Order Now</a>
        </div>  

    </div>

CSS

.header {
    background-image: url(../img/bg.jpg);
    height: 75vh;
    padding-top: 2rem;
    max-width: 100%;
    background-size: contain;
    background-repeat: no-repeat;
}

*, *::after, *::before{
    box-sizing: inherit;    
    padding: 0;
    margin: 0;
}

html{ /*Root font size is set in the html selector*/
    font-size: 62.5%; /* This is the font size we want(10px) divided by default root font size. 10/16 = .625*/
                      /*The reason we use percentage instead of hardcoded pixels is because it allows end users to change font size for vision purposes in their browser..*/
}

a:link, a:visited{
    text-decoration: none;
}

a{
    color: inherit;
}

header 中的所有元素都是 flex 元素，所以我省略了 CSS，因为我认为它不会增加任何值(value)。

Answer 1

如果您希望图像覆盖整个区域，请使用 background-size: cover 而不是 contain。