Размер фона составляет половину div

#css #background-image

Вопрос:

Мне нужен фон, ширина которого составляет 50% от div (от левого края до центра). И фоновое изображение не должно изменять пропорции при изменении экрана. Теперь у меня есть css:

 .bg {  display: flex;  justify-content: center;  align-items: stretch;  flex-direction: column;  background: url(../img.png);   background-position: left;  background-size: 50vw 100%;  -webkit-background-size: 50vw 100%; /* browser support */  -moz-background-size: 50vw 100%; /* browser support */  -o-background-size: 50vw 100%; /* browser support */  background-repeat: no-repeat; }

 lt;div class="bg container-fluid px-0"gt;  lt;div class="container-xl"gt;  lt;div class="left"gt;lt;/divgt;  lt;div class="right"gt;lt;/divgt;  lt;/divgt; lt;/divgt;

размеры img: 1043*735

Но изображение меняет пропорции (сжимается или растягивается) на разных экранах. Есть ли способ сделать изображение «обложкой», но все равно половиной div?

Ответ №1:

Добавьте левую обивку, покрывающую половину ширины, и закрепите фон в поле содержимого, затем вы можете использовать обложку:

 .bg {  height:100vh;  padding-left:50%;  background: url(https://picsum.photos/id/237/200/300);  background-position:center;  background-size: cover;  background-origin:content-box;  background-clip:content-box; }   body {  margin:0; }

 lt;div class="bg"gt;lt;/divgt;