1. 背景
如何设置元素高度与宽度成特定比例。宽度改变，高度自动按比例改变。
一般在响应式中，我们会要求视频的宽高比为16：9或4：3，这么一来就比较头大了。当用户改变浏览器宽度的时候（改变高度不考虑），视频的宽度变了，那么高度也得根据我们要求的16：9或4：3改变。
2. 题目
如何设置content容器的宽高比为16:9
//HTML代码片段
<div class="container">
<div class="wrapper">
<div class="content">content</div>
</div>
</div>
3. 核心思想
提供一个容器，设置容器的高度为0，再设置padding-bottom或者padding-top为56.25%（因为padding的百分比是按照容器宽度计算的，所以由padding来撑开容器高度，而不是height，保证了容器的宽高比例），最后设置视频绝对定位，其宽高为容器的100%。
4. 代码示例
* {
padding: 0;
margin: 0;
}
div {
border: 1px solid green;
}
.container {
width:100%;
}
.wrapper {
position:relative;
padding-top: 25px;
padding-bottom: 56.25%; // 16/9 = 0.5625;
height:0;
border: 1px solid red;
}
.content {
position:absolute;
top: 0;
left: 0;
width: 100%;
height:100%;
background:gray;
}
我们看到先设置.container容器宽度为400.这个值可以使任意的宽度，也可以是一个百分比。
.wrapper容器设置了padding-bottom为56.25%。 这个百分比是16/9的值，这里设置padding-bottom为父容器.container的宽度的百分之56.25.
另外。设置padding-top 为25px，这里在实际中也比较有用。 比如我们要设置一个视频播放器播放界面的宽高比为16:9。我们还希望播放界面上面留下25px的高度来放置播放控制的按钮。
通过padding-bottom和padding-top撑起了.wrapper容器的高度。并且设置height为0;
接下来是.comtent元素。我们设置这个元素绝对定位。top:0,left:0; width:100%;height:100%;因为它的父元素.wrapper的宽度和高度已经成比例了，所以使用width:100%;height:100%;就让content容器达到目的了。通过改变.container的宽度，.content元素的高宽也能成比例的改变。
5. 扩展
根据上述思想，我们再将其扩展下，应用到其他地方
这是一个移动端页面的一部分，要求全屏里面正好三张图片，左右图片宽度是相等的，第一个图片和第三个图片下面要对齐，图片之间的间距为10px。鉴于移动端的屏幕大小不等，所以使用定宽不合适。
*{
box-sizing: border-box;
}
.wrap{
overflow:hidden;
background-color: #efefef;
}
// 实现左右两边各50%
.left,.right{
float: left;
width: 50%;
padding: 10px;
}
.left{
padding-right: 5px;
}
.right{
padding-left: 5px;
}
// 实现高和宽度相等
// padding-top: 100%; 是相对于容器宽度的100%，即撑满了整个容器，高度由padding-top撑满，正好也是宽度
.inner{
padding-top: 100%;
position:relative;
}
img{
width: 100%;
vertical-align: middle;
position: absolute;
top: 0;
left: 0;
height: 100%;
}
.right-top{
height:67%;
width: 100%;
position: absolute;
top: 0;
left: 0;
}
.right-bottom{
height:33%;
position: absolute;
top: 67%;
width: 100%;
padding-top: 10px;
}
.bottom-inner{
height:100%;
position:relative;
}
6. 其他方法考虑
是不是可以用rem、em；让宽和高正好比例是16：9
是不是可以用vw单位
7. 总结
padding的百分比是按照容器宽度计算