国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

輕松實現固定比例的塊級容器

vvpale / 1022人閱讀

摘要:給布局的時候一般都會碰到橫幅比如要顯示成比當然后端返回的圖片是比就好了但事情往往不會那么如意所以怎么辦呢寫死寬高總覺得不妥當默認讓自適應呢圖片會慢慢撐開產品經理就會說這樣用戶體驗不好我就是用戶我就覺得挺好方法來了下面說明一下是個關鍵

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

寫死寬高總覺得不妥當

默認width: 100%;讓height自適應呢 圖片會慢慢撐開(產品經理就會說這樣用戶體驗不好 我TM就是用戶 我就覺得挺好)

方法來了

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

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

下面說明一下

padding-top: 50%;是個關鍵 用百分比寫padding是相對自身的寬的(別問我為什么 事實就是這樣)
所以width: 100%; padding-top: 50%;就會完美呈現出一個2比1的盒子
最后把img整個的胡上去
完活 是不是覺得狠簡單 用就完了 !

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

轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/114951.html

相關文章

  • 輕松實現固定比例塊級容器

    摘要:給布局的時候一般都會碰到橫幅比如要顯示成比當然后端返回的圖片是比就好了但事情往往不會那么如意所以怎么辦呢寫死寬高總覺得不妥當默認讓自適應呢圖片會慢慢撐開產品經理就會說這樣用戶體驗不好我就是用戶我就覺得挺好方法來了下面說明一下是個關鍵 給H5布局的時候一般都會碰到banner(橫幅) 比如要顯示成2比1 當然后端返回的圖片是2比1就好了 但事情往往不會那么如意 所以怎么辦呢 ? 寫死寬...

    cjie 評論0 收藏0
  • 如何居中一個元素(終結版)

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

    Hydrogen 評論0 收藏0
  • 如何居中一個元素(終結版)

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

    hlcc 評論0 收藏0
  • 如何居中一個元素(終結版)

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

    Meils 評論0 收藏0
  • CSS規(guī)范 > 9 視覺格式化模型 Visual Formatting Model

    摘要:盒的類型會影響其在視覺格式化模型中的表現。浮動元素絕對定位元素根元素都被稱為脫離文檔流其他元素被稱為文檔流內。 視覺格式化模型 Visual Formatting Model URL:http://www.w3.org/TR/CSS2/visuren.html Translator: HaoyCn Date: 14th of Aug, 2015 本文并未全部翻譯,譯者在原文基礎上...

    魏憲會 評論0 收藏0

發(fā)表評論

0條評論

vvpale

|高級講師

TA的文章

閱讀更多
最新活動
閱讀需要支付1元查看
<