padding-bottom實現圖片自適應

philadelphia 發布于2019-08-29 16:18 / 1666人閱讀

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

1.需求場景

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


    
        
    


.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% 呢，因為圖片的高為200px,寬為640px。 200/640 既為31.25%。 cell的padding-bottom撐起了cell的高度，這個百分度取值是相對于cell寬度的百分比，而不是父容器banner高度的百分比。此時我們就解決了圖片的自適應問題。
其實我們那還有另外一種寫法實現，如下：

.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云服務器圖片自適應圖片大小自適應 css圖片自適應 asp圖片自適應

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

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

巧用margin/padding的百分比值實現高度自適應（多用于占位，避免閃爍）

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

wenzi 2019-08-28 18:28 評論0 收藏0
【復習】CSS實現寬高等比自適應容器

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

habren 2019-08-30 15:44 評論0 收藏0
純CSS實現側邊欄/分欄高度自動相等

摘要：一為何要分欄高度一致分欄高度一致的目的是更加美觀。二純實現側邊欄分欄高度自動相等這里直接介紹我認為的最佳的側邊欄分欄高度自動相等方法。一、為何要分欄高度一致？分欄高度一致的目的是更加美觀。舉兩個例子吧。 ① 對于分欄布局，我們或許會用邊框(border)進行分隔，就如鄙人博客的分欄：邊框分欄張鑫旭-鑫空間-鑫生活此時最擔心的問題就是高度不一致，尤其是無邊框屬性的分欄高度超過有邊框...

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

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

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

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

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