Есть блок stucco-gal, который занимает 50% ширины экрана. Внутри этого блока находится блок owl-carousel, в котором располагаются блоки-слайдеры с фотографиями. Каждый блок-слайдер представляет собой блок с классом img, внутри которого блок с классом pbg, у которого задана фоновая картинка. При задании стилей для блоков img и pbg получается квадрат с одинаковой высотой и шириной, но при этом картинки внутри не помещаются полностью в блок-слайдер и обрезаются. Как сделать так, чтобы картинка ЛЮБОГО размера ровно располагалась и блоке-слайдере и при этом не обрезалась? То есть проще говоря- есть блок, который занимает половину экрана и этот блок квадратный и в нем расположена owl-carousel и я хочу, чтобы любые картинки помещались в этот квадратный блок без обрезаний
.stucco-gal {
width: 50%;
}
.img {
overflow: hidden;
position: relative;
width: 100%;
padding-bottom: 100%;
}
.pbg {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-size: cover;
background-repeat: no-repeat
}
<div class="stucco-gal">
<div class="owl-carousel">
<div class="img">
<div style="background-image: url(img/bg-5.jpg);" class="pbg"></div>
</div>
<div class="img">
<div style="background-image: url(img/bg-6.jpg);" class="pbg"></div>
</div>
<div class="img">
<div style="background-image: url(img/bg-7.jpg);" class="pbg"></div>
</div>
<div class="img">
<div style="background-image: url(img/bg-8.jpg);" class="pbg"></div>
</div>
</div>
</div>