Иметь одинаковую высоту с включенной автоматической шириной OwlCarousel - PullRequest
Новая
       11

Иметь одинаковую высоту с включенной автоматической шириной OwlCarousel

0 голосов
/ 12 февраля 2019

Я хочу показать небольшую галерею на моем веб-сайте, но изображения не реагируют на код AUTOWIDTH и имеют разную высоту.

Я создаю скрипту JS, чтобы объяснитьЯ чувствую себя лучше.

https://jsfiddle.net/w6axkqmz/1/

Я пытался использовать этот CSS 

.gallery .owl-carousel .owl-stage {
    display: flex !important;
}
.gallery .owl-carousel .owl-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

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

1 Ответ

0 голосов
/ 12 февраля 2019

Не устанавливайте height:50vh, он будет устанавливать высоту каждого изображения равной 50% высоты области просмотра браузера.Но без установки высоты object-fit не сработает.Установите высоту 100%, чтобы она имела ту же высоту галереи.

Относительная JSFiddle https://jsfiddle.net/2psgqb3v/

Причина, по которой вам нужно установить width и heightпотому что для браузера необходимо подогнать изображение / объект под эту высоту.Если вы не укажете это, то браузер будет использовать высоту / ширину изображения для рендеринга.

Решение состоит в том, чтобы создать медиа-запрос для установки ширины и высоты изображений.

Относительная скрипка https://jsfiddle.net/74rok0yg/

...