padding的百分比

????????在pc端 我們可能隨意設置圖片的固定寬高,但是在移動端,固定寬高就是濟幾給濟幾刨坑,這時候,padding就起了很大的作用。在css中,padding的百分比都是相對于寬度計算的。由于移動端的屏幕寬度是各不相同的,有的是414,有的是375,還有的是360或者320的,圖片在不同的寬度下需要固定圖片的寬高比例而不是圖片的寬高大小。

????????有時候我們可以設置圖片為背景圖片,固定一個高度,然后background-size: cover,但是隨著寬度的變化 高度就不太合適了, ̄□ ̄||這時候,padding就起大作用了:padding: 63% 0 0;background: url("../../../static/img/13.jpg") no-repeat center; background-size: cover; 這樣使用padding百分比,圖片比例都是恒定不變的。如圖1。


圖1 背景圖效果

????????但是,有一些不方便用背景圖片的地方,比如我們用的圖片都是請求接口獲取的時候,這時候就該用到img標簽了,只要圖片外面有一個固定比例的盒子,同樣能達到不同寬度下相同比例的圖片。如圖2。


圖2 img效果圖

????????代碼如下圖3和圖4:


圖3 html部分


圖4 css部分


最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。

推薦閱讀更多精彩內容