原文出處：https://www.aliyun.com/jiaocheng/639739.html

摘要：

前端寫頁面佈局時,圖片變形是個很令人頭疼的問題,手機螢幕解析度不一樣,出來的效果就不一樣,下面的程式碼可以解決這些問題,保持圖片在不同解析度下面也可以讓圖片不變形

• 1、首先不能給外層列表定高度,用margin或者padding撐開.album-li-pic{height:0;overflow:hidden;margin:0;padding-bottom:100%;}
• 2、img用定位的方式佈局,width設定成為100%.album-li-picimg{display:block;

前端寫頁面佈局時,圖片變形是個很令人頭疼的問題,手機螢幕解析度不一樣,出來的效果就不一樣,下面的程式碼可以解決這些問題,保持圖片在不同解析度下面也可以讓圖片不變形

1、首先不能給外層列表定高度,用margin或者padding撐開

.album-li-pic{
    height: 0;
    overflow: hidden;
    margin: 0;
    padding-bottom: 100%;
}

2、img用定位的方式佈局,width設定成為100%

.album-li-pic img{
    display: block;
    position: absolute;
    width: 100%;
    top: 0;
    bottom: 0;
}
 

html程式碼如下

<li class="album-li">
    <a>
        <div class="album-li-pic">
            <img src="" class="album-pic" />
        </div>
    </a>
</li>

如果圖片不是正方形的,可以調整padding-bottom來實現,比如圖片要求4:3,那麼padding-bottom就設定為75%就行了

原理:通過margin, padding 的百分比數值計算,(按照規定,margin, padding 的百分比數值是相對 父元素寬度 的寬度計算的),然後利用百分比數值的 padding-bottom 屬性撐開容器內部空間,然後讓img充滿整個父級就OK了

用谷歌瀏覽器模擬手機效果如下:

放大解析度再看:

這樣就達到我們預期的效果了,在不同解析度下圖片始終不會變形