所以我想知道如何解决以下问题;
[在台式机和平板电脑上,我使用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>
.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 ...
最后的选择是以正确的比例生成多个图像大小。
好,所以我以为自己被卡住了,但是后来意识到我可以使用display flex和z-index来防止其他图像重叠。 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;
}
希望这可以帮助其他人!