在我以前的文章中，我讲过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/