第七色在线视频,2021少妇久久久久久久久久,亚洲欧洲精品成人久久av18,亚洲国产精品特色大片观看完整版,孙宇晨将参加特朗普的晚宴

為了賬號安全,請及時綁定郵箱和手機立即綁定
已解決430363個問題,去搜搜看,總會有你想問的

貓頭鷹旋轉木馬 - 使用填充比技巧 - 將圖像居中對齊

貓頭鷹旋轉木馬 - 使用填充比技巧 - 將圖像居中對齊

慕俠2389804 2024-01-03 14:01:20
所以我想知道如何解決以下問題;在臺式機和平板電腦上,我使用比例為 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 ...最后的手段是以正確的比例生成多個圖像尺寸。
查看完整描述

1 回答

?
RISEBY

TA貢獻1856條經(jīng)驗 獲得超5個贊

好吧,所以我以為我被卡住了,但后來意識到我可以使用顯示柔性和 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;

}

希望這可以幫助別人!


查看完整回答
反對 回復 2024-01-03
  • 1 回答
  • 0 關注
  • 133 瀏覽

添加回答

舉報

0/150
提交
取消
微信客服

購課補貼
聯(lián)系客服咨詢優(yōu)惠詳情

幫助反饋 APP下載

慕課網(wǎng)APP
您的移動學習伙伴

公眾號

掃描二維碼
關注慕課網(wǎng)微信公眾號