網(wǎng)上學的方法,無論頁面怎么拉伸,寬高比都不會變,而且上下也不會留白影響布局
缺點:以后如果替換圖片的話需要換寬高比一樣的圖片,不然就要修改padding-top值,適用于用戶不經(jīng)常修改的圖片.
1.先查看圖片的寬和高,計算出比例
QQ截圖20190131232700.png
以上圖為例,1245 / 592=2.1
2.計算padding值
圖片外面需包裹一個div, 100% / 2.1 = 47.6%,得出padding-top:47.6%:
.firstPic{
width:100%;
//若更換圖片需修改padding
padding-top:47.6%;
position: relative;
img{
left: 50%;
top:50%;
width: 100%;
position: absolute;
transform:translate(-50%,-50%);
}
}
