Как сделать так, чтобы активный слайд увеличивался в высоту снизу вверх?

avatar
Toppy
9 августа 2021 в 01:21
67
1
0

Как сделать так, чтобы активный слайд рос в высоту не вниз, а вверх? Я использую owl-carousel

Сайт http://cb95142.tmweb.ru/

Код jsfiddle.net/90f2cLkm/

Мой результат введите описание изображения здесь

Право введите описание изображения здесь

.gallery-slider .owl-item.center img {
  height: 700px !important;
}
<section class="gallery">
        <div class="wrapper">
            <div class="content">
                <div class="gallery-block">
                    <div class="plug"></div>
                    <div class="title-block">
                        <div class="forehead">Frispes gallery</div>
                        <h3>Immersive beautiful<br>co-working space gallery</h3>
                    </div>
                </div>
                
            </div>
        </div>
        <div class="gallery-slider owl-carousel">
            <div class="gal-slide">
                <img src="img/gal-1.jpg" alt="1">
            </div>
            <div class="gal-slide">
                <img src="img/gal-2.jpg" alt="2">
            </div>
            <div class="gal-slide">
                <img src="img/gal-3.jpg" alt="3">
            </div>
            <div class="gal-slide">
                <img src="img/gal-4.jpg" alt="4">
            </div>
            <div class="gal-slide">
                <img src="img/gal-5.jpg" alt="4">
            </div>
            <div class="gal-slide">
                <img src="img/gal-6.jpg" alt="4">
            </div>
        </div>
    </section>
Источник
A Haworth
9 августа 2021 в 06:58
0

Изображение сильно искажено, это нормально?

Ответы (1)

avatar
A Haworth
9 августа 2021 в 07:24
1

Если вы добавите это, оно сделает это.

padding-top: 100%;
position: relative;

Таким образом, ваш CSS станет следующим:

.gallery-slider .owl-item.center img {
    height: 700px !important;
    padding-top: 100%;
    position: relative;
}

Это работает, потому что ширина слайдов равна их высоте (если не текущей), а отступы всегда определяются по оси x, а не по оси y. Таким образом, этот код перемещает изображение вверх на 700 пикселей, а затем вниз на нормальную высоту из-за отступов.

Тем не менее, пара моментов. Изображение искажается, и это сильно заметно на узких окнах просмотра — люди выглядят «растянутыми». Кроме того, сайт не отвечает - возможно, это не имеет значения в вашем случае использования, но если он пытается работать в относительных, а не в абсолютных единицах, таких как px.

A Haworth
9 августа 2021 в 15:56
0

Это сработало на вашем сайте, когда я вставил его через инструменты разработчика браузера. Куда ты его положил?

Toppy
10 августа 2021 в 22:42
0

Я также написал этот код для .gallery-slider .owl-item.center img со свойствами, которые вы мне написали. Вы делаете именно так, как надо - активный слайд увеличивается по высоте над неактивными?