【问题标题】：Owl Carousel - Using padding-ratio trick - Align image in centerOwl Carousel - 使用填充比率技巧 - 将图像居中对齐
【发布时间】：2020-07-29 12:46:41
【问题描述】：

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

在台式机和平板电脑上，我使用比例为 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;
}

我在这里阅读了多个主题，如您所见，我尝试使用“文本对齐”和 translateX 功能，但似乎无法解决这个问题。应该可以吧？

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

最后的手段是以正确的比例生成多个图像尺寸。

【问题讨论】：

标签： jquery html css center owl-carousel

【解决方案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;
}

希望这可以帮助其他人！

【讨论】：