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

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 {

    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;

}

希望这可以帮助别人！