有时需要做效果的时候需要实现一个效果就是一张单的图片或者轮播图，需要这个banner区域和屏幕的宽度进行适配，而且要求这个区域的宽高始终保持的相同的比例，比如保持比例4:3，并且随着屏幕进行自动的播放。
最直观想到的可能是用js来实现，随时获取宽度并且计算出相对比例的高，然后进行赋值。但是这样很麻烦，纯css就可以实现。就是padding值这个属性,padding值在设置为百分比的时候，高度是根据宽度进行设置的，然后我们把图片设置为背景，背景是从padding部分开始填充的，这样就完全可以实现了，自动随着屏幕缩放并且宽高可以成比例。
重点：CSS百分比padding都是相对宽度计算的
这里有一篇博客，介绍百分比padding的，大家可以参考http://www.zhangxinxu.com/wordpress/2017/08/css-percent-padding-image-layout/
我用百分比padding完成了自适应成比例宽高的图片这种布局，具体如下:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>标题</title>
<meta name="keywords" content="">
<meta name="description" content="">
<style>
.wrap1{
padding-bottom:75%;
/* padding: 37.5% 50%; */
background:url(../img/01.png) 0 0 no-repeat;
background-size:100% 100%;
}
.wrap2{
display:table;
width:100%;
}
.wrap2 div{
display:table-cell;
padding:0 0 37.5% 50%;
background:url(../img/01.png) 0 0 no-repeat;
background-size:100% 100%;
}
.wrap3{
/* display:table; */
overflow:hidden;
width:80%;
margin:0 10%;
}
.wrap3 div{
padding:0 0 33.75% 45%;
/* display:table-cell; */
float:left;
background:url(../img/01.png) 0 0 no-repeat;
background-size:100% 100%;
margin:10px 0;
}
.inner+.inner{
margin-left:10%;
}
.wrap4{
padding-bottom:75%;
position:relative;
}
img{
width:100%;
height:100%;
position:absolute;
left:0;
top:0;
}
</style>
</head>
<body>
<!-- 一张图片宽高比4:3自适应 -->
<div class="wrap1">
</div>
<!-- 两张张图片宽高比4:3自适应 -->
<div class="wrap2">
<div>
</div>
<div>
</div>
</div>
<!-- 两张张图片宽高比4:3自适应，且中间有固定边距 -->
<div class="wrap3">
<div class="inner">
</div>
<div class="inner">
</div>
</div>
<!-- 图片不作为背景图引入 --><div class="wrap4"><img src="../img/01.png" alt=""></div></body></html>
可以看到由于padding的垂直方向是根据横向设置的，所以当宽为百分百的时候，只需要设置padding-bottom就可以了，或者直接设置横向的百分比，再按照固定的比例设置纵向的百分比就可以了。
在wrap4中，是图片没有作为背景图片引入，但是要实现固定比例又只能给父元素div设置百分比，直接放入img的话就不会从padding部分就开始显示，所以需要用定位的方式，将图片定位到从padding部分就开始显示。