????????在pc端 我們可能隨意設(shè)置圖片的固定寬高,但是在移動端谆趾,固定寬高就是濟(jì)幾給濟(jì)幾刨坑,這時候叛本,padding就起了很大的作用沪蓬。在css中,padding的百分比都是相對于寬度計算的来候。由于移動端的屏幕寬度是各不相同的跷叉,有的是414,有的是375,還有的是360或者320的云挟,圖片在不同的寬度下需要固定圖片的寬高比例而不是圖片的寬高大小梆砸。
????????有時候我們可以設(shè)置圖片為背景圖片,固定一個高度园欣,然后background-size: cover,但是隨著寬度的變化 高度就不太合適了沸枯, ̄□ ̄||這時候日矫,padding就起大作用了:padding: 63% 0 0;background: url("../../../static/img/13.jpg") no-repeat center; background-size: cover; 這樣使用padding百分比,圖片比例都是恒定不變的绑榴。如圖1哪轿。
圖1 背景圖效果
????????但是,有一些不方便用背景圖片的地方翔怎,比如我們用的圖片都是請求接口獲取的時候窃诉,這時候就該用到img標(biāo)簽了,只要圖片外面有一個固定比例的盒子姓惑,同樣能達(dá)到不同寬度下相同比例的圖片褐奴。如圖2按脚。
圖2 img效果圖
????????代碼如下圖3和圖4:
圖3 html部分
圖4 css部分