css - 完整的背景图像未在 div 中正确呈现

Question

我在我的 div 中使用了一个完整的背景图像，但是当调整窗口大小时它没有从左右正确调整大小，我不想使用 position:fixed 因为它会产生问题对我来说。

请帮忙，我该如何解决这个问题，图像应该根据窗口大小(调整大小)完美调整大小。

<div class="row">
      <div class="container-fluid">
           <div class="col-md-3"></div>
           <div class="col-md-9">
                 <div class="loginbg"></div> 
            </div>
        </div>
</div>

**css:**
.loginbg{
background: url("../../images/TalexAuthbg3.jpg") no-repeat center top;
    z-index: 0;
    background-size: cover;
    height:100vh;
    background-position:100%;
}

我想在 .loginbg div 中呈现完整的背景图像，但它没有正确呈现。

Answer 1

如果您希望在每个窗口尺寸下显示完整图像，您可以使用 background-size: contain，因为 background-size: cover 会裁剪图像以适合在不影响其纵横比的情况下调整窗口大小。

.loginbg{
background: url("https://longstoryshortdesign.co.uk/wp-content/uploads/2017/03/mc-saatchi-hero-home.jpg") no-repeat center top;
    z-index: 0;
    background-size: contain;
    height:100vh;
}

<div class="row">
      <div class="container-fluid">
           <div class="col-md-3"></div>
           <div class="col-md-9">
                 <div class="loginbg"></div> 
            </div>
        </div>
</div>