0

Есть блок 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>

1
  • width:auto для img должен сработать
    – Armen
    Commented 14 нояб. 2020 в 14:07

1 ответ 1

1

Используйте для класса pbg:

background-size: contain;

Если вам нужно, чтобы квадрат сохранялся тогда используйте:

background-size: 100% 100%;

Однако, изображение будет выглядеть растянутым

Подробнее - http://htmlbook.ru/css/background-size

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.