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>

整个背景图片在div中无法正确渲染

1 个答案: