猫头鹰旋转木马 - 使用填充比技巧 - 将图像居中对齐

Question

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

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

但有一件事是，猫头鹰旋转木马内的图片向左对齐，我需要这些图像在容器内居中。

超文本标记语言

<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 ...

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

Answer 1

好吧，所以我以为我被卡住了，但后来意识到我可以使用显示柔性和 z 索引来防止其他图像重叠。CSS 看起来像这样；CSS.owl-carousel.owl-centered .owl-stage-outer {&nbsp; &nbsp; position: relative;&nbsp; &nbsp; padding-top: 100%;&nbsp; &nbsp; width: 100%;}.owl-carousel.owl-centered .owl-stage {&nbsp; &nbsp; position: absolute;&nbsp; &nbsp; top: 0;&nbsp; &nbsp; left: 0;&nbsp; &nbsp; height: 100%;}.owl-carousel.owl-centered .owl-item {&nbsp; &nbsp; display: flex;&nbsp; &nbsp; flex-direction: row;&nbsp; &nbsp; justify-content: center;&nbsp; &nbsp; height: 100%;&nbsp; &nbsp; width: auto;}.owl-carousel.owl-centered .owl-item.active {&nbsp; &nbsp; z-index: 999; <-- There it is}.owl-carousel.owl-centered .owl-item > img {&nbsp; &nbsp; height: 100%;&nbsp; &nbsp; width: auto;}希望这可以帮助别人！