полное фоновое изображение не отображается правильно в div

Question

Я использую в фоновом изображении полное фоновое изображение, но при изменении размера окна оно не изменяется должным образом слева и справа, я не хочу использовать position:fixed, потому что это создает проблемы для меня.

Пожалуйста, помогите, как я могу решить эту проблему, размер изображения должен быть идеально изменен в соответствии с размером окна (resize).

<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>