元素的内边距设置百分比数值。百分比数值是相当于父元素的width计算的。如果父元素的width改变，它们也会改变。

<div class="container">

<div class="banner-wrapper">

<img src="images/banner.jpg">

</div>

</div>

.container{

width: 100%;

}

.banner-wrapper{

padding-bottom: 56.25%;

position: relative;

}

.banner-wrapper img{

width: 100%;

height: 100%;

position: absolute;

top:0;

left: 0;

}

核心思想：

提供一个容器，设置容器的高度为0，再设置padding-bottom或者padding-top为56.25%（因为padding的百分比是按照容器宽度计算的，所以由padding来撑开容器高度，而不是height，保证了容器的宽高比例），最后图片绝对定位，其宽高为容器的100%