HTML

Question

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

在台式机和平板电脑上，我使用比例为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功能，但是似乎无法解决这个问题。应该有可能吧？

我还尝试了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;
}

希望这可以帮助其他人！

猫头鹰轮播-使用填充比例技巧-居中对齐图像

HTML

CSS

1 个答案:

CSS