Как сделать так чтобы картинка адаптивно занимала все пространство блока?

Question

[Norum]

В секции stucco-section есть два блока. В блоке gallery stucco-gall располагается блок owl-carousel и он занимает 50% ширины экрана, в котором слайдятся фотки. Второй блок stucco-gal-info, в котором располагается текст с рамкой, который по дизайну немного залазит на блок со слайдами.
Мой код https://jsfiddle.net/Norum87/Lb543fnr/
Вопросы:
1) Как сделать так, чтобы фотографии в блоке stucco-gall занимали все пространство блока и при этом ширина и высота были автоматически равны и пропорционально уменьшались при уменьшении экрана? То есть чтобы получался адаптивный квадрат? Я пытался уладить это с помощью этого способа https://medium.com/@anna.cloverfield/%D0%BA%D0%B0%...
и этого способа jsfiddle.net/0nc2n0yy , но я не понял как.

2) Так же я не понимаю, почему у меня при слайде выскакивает часть другой фотографии?

Answer 1

[Владислав Черненко]

Проще тогда отказаться от вложенных IMG и сделать через background, что-то типа такого:

<div class="slider">
   <div class="item" style="background-image:url(.../img-1.jpg);"></div>
   <div class="item" style="background-image:url(.../img-2.jpg);"></div>
</div>

.slider .item{
   min-height:300px;
   background-size:cover;
}

Comments

[Norum]

картинка все равно ровным квадратом не стала

[Владислав Черненко]

Norum, если каждый слайд будет одного размера все будет четко, background растянется по нему. Отцентрируйте еще.

background-position: 50% 50%;