輕松實(shí)現(xiàn)固定比例的塊級(jí)容器

cjie 發(fā)布于2019-08-02 15:31 / 1751人閱讀

摘要：給布局的時(shí)候一般都會(huì)碰到橫幅比如要顯示成比當(dāng)然后端返回的圖片是比就好了但事情往往不會(huì)那么如意所以怎么辦呢寫(xiě)死寬高總覺(jué)得不妥當(dāng)默認(rèn)讓自適應(yīng)呢圖片會(huì)慢慢撐開(kāi)產(chǎn)品經(jīng)理就會(huì)說(shuō)這樣用戶(hù)體驗(yàn)不好我就是用戶(hù)我就覺(jué)得挺好方法來(lái)了下面說(shuō)明一下是個(gè)關(guān)鍵

給H5布局的時(shí)候一般都會(huì)碰到banner（橫幅）
比如要顯示成2比1 當(dāng)然后端返回的圖片是2比1就好了但事情往往不會(huì)那么如意所以怎么辦呢？

寫(xiě)死寬高總覺(jué)得不妥當(dāng)

默認(rèn)width: 100%;讓height自適應(yīng)呢圖片會(huì)慢慢撐開(kāi)（產(chǎn)品經(jīng)理就會(huì)說(shuō)這樣用戶(hù)體驗(yàn)不好我TM就是用戶(hù) 我就覺(jué)得挺好）

方法來(lái)了

        .banner-wrapper {
            position: relative;
            width: 100%;
            padding-top: 50%;
        }

        .banner {
            position: absolute;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
        }

下面說(shuō)明一下

padding-top: 50%;是個(gè)關(guān)鍵 用百分比寫(xiě)padding是相對(duì)自身的寬的（別問(wèn)我為什么事實(shí)就是這樣）
所以width: 100%; padding-top: 50%;就會(huì)完美呈現(xiàn)出一個(gè)2比1的盒子
最后把img整個(gè)的胡上去
完活是不是覺(jué)得狠簡(jiǎn)單用就完了！

GPU云服務(wù)器云服務(wù)器 JS輕松實(shí)現(xiàn)CSS設(shè)置容器固定ip 塊級(jí)流中塊級(jí)

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/54183.html

相關(guān)文章

輕松實(shí)現(xiàn)固定比例的塊級(jí)容器

摘要：給布局的時(shí)候一般都會(huì)碰到橫幅比如要顯示成比當(dāng)然后端返回的圖片是比就好了但事情往往不會(huì)那么如意所以怎么辦呢寫(xiě)死寬高總覺(jué)得不妥當(dāng)默認(rèn)讓自適應(yīng)呢圖片會(huì)慢慢撐開(kāi)產(chǎn)品經(jīng)理就會(huì)說(shuō)這樣用戶(hù)體驗(yàn)不好我就是用戶(hù)我就覺(jué)得挺好方法來(lái)了下面說(shuō)明一下是個(gè)關(guān)鍵給H5布局的時(shí)候一般都會(huì)碰到banner（橫幅）比如要顯示成2比1 當(dāng)然后端返回的圖片是2比1就好了但事情往往不會(huì)那么如意所以怎么辦呢？寫(xiě)死寬...

vvpale 2019-08-30 11:22 評(píng)論0 收藏0
如何居中一個(gè)元素（終結(jié)版）

摘要：源代碼演示利用將要水平排列的塊狀元素設(shè)為，然后在父級(jí)元素上設(shè)置，達(dá)到與上面的行內(nèi)元素的水平居中一樣的效果。前言本文主要介紹水平居中，垂直居中，還有水平垂直居中各種辦法，思維導(dǎo)圖如下： showImg(https://segmentfault.com/img/bVblwhg?w=1334&h=563); 如需本文的思維導(dǎo)圖，請(qǐng)猛戳Github個(gè)人博客一、水平居中 1.行內(nèi)元素水平居...

Hydrogen 2019-08-29 16:56 評(píng)論0 收藏0
如何居中一個(gè)元素（終結(jié)版）

摘要：源代碼演示利用將要水平排列的塊狀元素設(shè)為，然后在父級(jí)元素上設(shè)置，達(dá)到與上面的行內(nèi)元素的水平居中一樣的效果。前言本文主要介紹水平居中，垂直居中，還有水平垂直居中各種辦法，思維導(dǎo)圖如下： showImg(https://segmentfault.com/img/bVblwhg?w=1334&h=563); 如需本文的思維導(dǎo)圖，請(qǐng)猛戳Github個(gè)人博客一、水平居中 1.行內(nèi)元素水平居...

hlcc 2019-08-02 11:43 評(píng)論0 收藏0
如何居中一個(gè)元素（終結(jié)版）

摘要：源代碼演示利用將要水平排列的塊狀元素設(shè)為，然后在父級(jí)元素上設(shè)置，達(dá)到與上面的行內(nèi)元素的水平居中一樣的效果。前言本文主要介紹水平居中，垂直居中，還有水平垂直居中各種辦法，思維導(dǎo)圖如下： showImg(https://segmentfault.com/img/bVblwhg?w=1334&h=563); 如需本文的思維導(dǎo)圖，請(qǐng)猛戳Github個(gè)人博客一、水平居中 1.行內(nèi)元素水平居...

Meils 2019-08-23 12:20 評(píng)論0 收藏0
CSS規(guī)范 > 9 視覺(jué)格式化模型 Visual Formatting Model

摘要：盒的類(lèi)型會(huì)影響其在視覺(jué)格式化模型中的表現(xiàn)。浮動(dòng)元素絕對(duì)定位元素根元素都被稱(chēng)為脫離文檔流其他元素被稱(chēng)為文檔流內(nèi)。視覺(jué)格式化模型 Visual Formatting Model URL：http://www.w3.org/TR/CSS2/visuren.html Translator: HaoyCn Date: 14th of Aug, 2015 本文并未全部翻譯，譯者在原文基礎(chǔ)上...

魏憲會(huì) 2019-08-28 18:15 評(píng)論0 收藏0