Owl 旋转木马 - 使用填充比技巧 - 居中对齐图像

Question

所以我想知道如何解决以下问题；

在台式机和平板电脑上，我使用比例为 16:9（或 1280x720）的图像。尽管在移动设备上我想以 1:1 的固定比例显示这些图像。这是通过使用著名的填充技巧来完成的。

不过有一件事，owl-carousel 中的图片向左对齐，我需要这些图片在容器中居中。

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;
}

我在这里阅读了多个主题，如您所见，我已经尝试使用 "text-align" 和 translateX 功能，但我似乎无法解决这个问题。应该可以吧？

我也试过 Owl Carousel 附带的 autoWidth 和 autoHeight...

不得已的办法是以正确的比例生成多个图像尺寸。

Answer 1

好吧，我以为我被卡住了，但后来意识到我可以使用 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;
}

希望这对其他人有帮助！

Owl 旋转木马 - 使用填充比技巧 - 居中对齐图像

Owl Carousel - Using padding-ratio trick - Align image in center

jquery

html

css

center

owl-carousel

HTML

CSS

CSS