Сова Карусель - Использование трюка с коэффициентом заполнения - Выровнять изображение по центру - PullRequest
Новая
       14

Сова Карусель - Использование трюка с коэффициентом заполнения - Выровнять изображение по центру

0 голосов
/ 16 апреля 2020

Поэтому мне интересно, как я могу решить следующее:

На настольном компьютере и планшете я использую изображения с соотношением 16: 9 (или 1280x720). Хотя на мобильном я бы хотел показать эти изображения в фиксированном соотношении 1: 1. Это делается с помощью известного трюка с отступами.

Хотя одна вещь, изображения внутри совы-карусели выровнены по левому краю, мне нужно, чтобы эти изображения были центрированы внутри контейнера.

HTML

<div class="owl-carousel owl-centered owl-theme owl-loaded owl-drag">
    <div class="owl-stage-outer">
        <div class="owl-stage" style="transition: all 0s ease 0s; width: 2520px; transform: translate3d(-720px, 0px, 0px);">
            <div class="owl-item cloned" style="width: 360px;">
                <img src="" class="item"/>
            </div>
            <div class="owl-item cloned" style="width: 360px;">
                <img src="" class="item"/>
            </div>
            <div class="owl-item active center" style="width: 360px;">
                <img src="" class="item"/>
            </div>
            <div class="owl-item" style="width: 360px;">
                <img src="" class="item"/>
            </div>
            <div class="owl-item" style="width: 360px;">
                <img src="" class="item"/>
            </div>
            <div class="owl-item cloned" style="width: 360px;">
                <img src="" class="item"/>
            </div>
            <div class="owl-item cloned" style="width: 360px;">
                <img src="" class="item"/>
            </div>
        </div>
    </div>
</div>

CSS

.owl-carousel.owl-centered .owl-stage-outer {
    position: relative;
    padding-top: 100%;
    width: 100%;
}

.owl-carousel.owl-centered .owl-stage {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
}

.owl-carousel.owl-centered .owl-item,
.owl-carousel.owl-centered .owl-item > img {
    height: 100%;
    width: auto;
    text-align: center;
    overflow: hidden;
}

Я прочитал несколько тем здесь, так что, как вы можете видеть, я пытался использовать "выравнивание текста" и функции translateX, но я просто не могу решить эту проблему. Это должно быть возможно, верно?

Я также пробовал autoWidth и autoHeight, которые поставляются с Owl Carousel ...

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

1 Ответ

0 голосов
/ 16 апреля 2020

Хорошо, я подумал, что застрял, но потом понял, что могу использовать display flex и z-index для предотвращения наложения других изображений. css выглядит так:

CSS

.owl-carousel.owl-centered .owl-stage-outer {
    position: relative;
    padding-top: 100%;
    width: 100%;
}

.owl-carousel.owl-centered .owl-stage {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
}

.owl-carousel.owl-centered .owl-item {
    display: flex;
    flex-direction: row;
    justify-content: center;
    height: 100%;
    width: auto;
}

.owl-carousel.owl-centered .owl-item.active {
    z-index: 999; <-- There it is
}

.owl-carousel.owl-centered .owl-item > img {
    height: 100%;
    width: auto;
}

Надеюсь, что это может помочь кому-то еще!

...