padding-bottom實(shí)現(xiàn)圖片自適應(yīng)

philadelphia 發(fā)布于2019-08-29 16:18 / 1706人閱讀

摘要：那我們該怎么解決呢見代碼為什么取值呢，因?yàn)閳D片的高為寬為。的撐起了的高度，這個百分度取值是相對于寬度的百分比，而不是父容器高度的百分比。此時我們就解決了圖片的自適應(yīng)問題。其實(shí)我們那還有另外一種寫法實(shí)現(xiàn)，如下

1.需求場景

如我們在實(shí)現(xiàn)移動端banner輪播的時候，需要輪播圖充滿我們的輪播區(qū)域，通常我們的做法是banner設(shè)置固定寬高,然后超出隱藏，img設(shè)置max-width:100%;這樣雖然能實(shí)現(xiàn)充滿輪播區(qū)域，可是我們會發(fā)現(xiàn)，雖然寬度自適應(yīng)了，高度并沒有自適應(yīng)，有時候我們會發(fā)現(xiàn)縱向上圖片底部不見了，因?yàn)槿绻麍D片太高，當(dāng)圖片寬度100% 自適應(yīng)的時候，高度也會按照寬度自適應(yīng)的比例進(jìn)行自適應(yīng)(縮小或放大)，此時高度超出banner區(qū)域被隱藏了，視覺上會造成圖片丟失的感覺。那我們該怎么解決呢？見代碼


    
        
    


.banner{
    width: 700px;
    height: 700px;
    border: 1px solid #000;
    margin: 0 auto;
}
.cell{
    width:100%;
    height: 0;
    padding-bottom: 31.25%;
    overflow: hidden;
    background: red;
}
img{width: 100%;}

為什么padding-bottom 取值31.25% 呢，因?yàn)閳D片的高為200px,寬為640px。 200/640 既為31.25%。 cell的padding-bottom撐起了cell的高度，這個百分度取值是相對于cell寬度的百分比，而不是父容器banner高度的百分比。此時我們就解決了圖片的自適應(yīng)問題。
其實(shí)我們那還有另外一種寫法實(shí)現(xiàn)，如下：

.banner{
    width: 700px;
    height: 700px;
    border: 1px solid #000;
    margin: 0 auto;
}
.cell{
    width:100%;
    height:31.25vw;
    overflow: hidden;
    background: red;
}
img{width: 100%;}

GPU云服務(wù)器云服務(wù)器圖片自適應(yīng) 圖片大小自適應(yīng) css圖片自適應(yīng) asp圖片自適應(yīng)

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

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

相關(guān)文章

巧用margin/padding的百分比值實(shí)現(xiàn)高度自適應(yīng)（多用于占位，避免閃爍）

摘要：那想要優(yōu)化這一點(diǎn)，唯一的方法就是利用內(nèi)容高度來撐開而非，這個方案跟消除浮動所用的方案非常相似給容器添加一個子元素偽元素，并把子元素偽元素的設(shè)為，使其實(shí)際高度相當(dāng)于容器的寬度，如此一來，便能把容器的高度撐至與寬度一致了。一個基礎(chǔ)卻又容易混淆的css知識點(diǎn) 本文依賴于一個基礎(chǔ)卻又容易混淆的css知識點(diǎn)：當(dāng)margin/padding取形式為百分比的值時，無論是left/right，還是t...

wenzi 2019-08-28 18:28 評論0 收藏0
【復(fù)習(xí)】CSS實(shí)現(xiàn)寬高等比自適應(yīng)容器

摘要：于是我們就需要實(shí)現(xiàn)一個寬度自適應(yīng)，高度為寬度一半的容器。一思考如何實(shí)現(xiàn)這個問題類似于我們在移動端頁面，上面有一張寬度的圖片，如果我們沒設(shè)置高度，則圖片會根據(jù)原有尺寸，等比縮放。我們就可以利用這個特性，實(shí)現(xiàn)移動端的寬高等比自適應(yīng)容器。在最近開發(fā)移動端頁面，遇到這么一個情況：當(dāng)頁面寬度 100% 時，高度為寬度一半，并隨手機(jī)寬度變化依然是一半。于是我們就需要實(shí)現(xiàn)一個寬度自適應(yīng)，高度為寬...

habren 2019-08-30 15:44 評論0 收藏0
純CSS實(shí)現(xiàn)側(cè)邊欄/分欄高度自動相等

摘要：一為何要分欄高度一致分欄高度一致的目的是更加美觀。二純實(shí)現(xiàn)側(cè)邊欄分欄高度自動相等這里直接介紹我認(rèn)為的最佳的側(cè)邊欄分欄高度自動相等方法。一、為何要分欄高度一致？分欄高度一致的目的是更加美觀。舉兩個例子吧。 ① 對于分欄布局，我們或許會用邊框(border)進(jìn)行分隔，就如鄙人博客的分欄：邊框分欄張鑫旭-鑫空間-鑫生活此時最擔(dān)心的問題就是高度不一致，尤其是無邊框?qū)傩缘姆謾诟叨瘸^有邊框...

li21 2019-08-29 12:43 評論0 收藏0
幾種常見的CSS布局

摘要：本文概要本文將介紹如下幾種常見的布局其中實(shí)現(xiàn)三欄布局有多種方式，本文著重介紹圣杯布局和雙飛翼布局。借助等高布局正負(fù)可解決，下文會介紹雙飛翼布局特點(diǎn)同樣也是三欄布局，在圣杯布局基礎(chǔ)上進(jìn)一步優(yōu)化，解決了圣杯布局錯亂問題，實(shí)現(xiàn)了內(nèi)容與布局的分離。本文概要本文將介紹如下幾種常見的布局： showImg(https://segmentfault.com/img/remote/14600000...

FuisonDesign 2019-08-23 12:57 評論0 收藏0
幾種常見的CSS布局

摘要：本文概要本文將介紹如下幾種常見的布局其中實(shí)現(xiàn)三欄布局有多種方式，本文著重介紹圣杯布局和雙飛翼布局。借助等高布局正負(fù)可解決，下文會介紹雙飛翼布局特點(diǎn)同樣也是三欄布局，在圣杯布局基礎(chǔ)上進(jìn)一步優(yōu)化，解決了圣杯布局錯亂問題，實(shí)現(xiàn)了內(nèi)容與布局的分離。本文概要本文將介紹如下幾種常見的布局： showImg(https://segmentfault.com/img/remote/14600000...

andot 2019-08-02 11:58 評論0 收藏0