在我以前的文章中，我講過CSS中的一系列的百分比單位，其中margin和padding是相對於容器的寬度的，最近看到了一個文章，講的是用padding來實現圖片等比例佈局。大概的需求如下，我們需要將圖片按照我們希望的比列進行顯示，圖片的寬度是按照百分比響應式。你可能覺得這沒啥，因爲img標籤在沒有設定固定的高度時，其高度會按照圖片本身的比列進行計算。但是我們的圖片本身可能不是按照我們希望的比列。這裏就可以運用padding百分實現了
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Padding百分比</title>
<style>
*{
margin: 0;
padding: 0;
}
.outer{
width: 100%;
}
.wrap{
vertical-align: top;
display: inline-block;
width: 49%;
padding-bottom: 60%;
margin-bottom: 30px;
position: relative;
}
.wrap2{
vertical-align: top;
display: inline-block;
width: 49%;
}
div > img{
width: 100%;
height: 100%;
}
.item2{
position: absolute;
}
</style>
</head>
<body>
<div class="outer">
<div class="wrap">
<img class="item2" src="../Img/long.png">
</div>
<div class="wrap2">
<img src="../Img/long.png">
</div>
</div>
</body>
</html>
效果如下圖：
右側是圖片本身的比例，左側是我們根據我們自己設定的百分比顯示的結果。
還有一點需要注意，對於沒有設定高度的圖片，其在加載是高度是由零變化到目標高度，會引起大量的重繪，性能很不友好。
關於這個padding百分比佈局更詳細的內容可以參考下文：
https://www.zhangxinxu.com/wordpress/2017/08/css-percent-padding-image-layout/