css中如何做到容器按比例缩放
对于图片，默认只设置图片的一个宽或高，那么另一个值就会按照图片真实比例缩放，如
<img class="demo1" src="http://placehold.it/200x150" alt="">
<img class="demo2" src="http://placehold.it/400x300" alt="">
.demo1{
width: 100px;/* 只设置宽度，根据等比例缩放得到高度为75px */
}
.demo2{
height: 150px; /* 只设置高度，根据等比例缩放得到宽度为200px */
}
图片因为本身存在宽高比，所以设置一个值，另一个值自动也就根据真实的比例对应上，但是如果是视频呢？
一般在响应式中，我们会要求视频的宽高比为16：9或4：3，这么一来就比较头大了。当用户改变浏览器宽度的时候（改变高度不考虑），视频的宽度变了，那么高度也得根据我们要求的16：9或4：3改变。
核心思想为：提供一个容器，设置容器的高度为0，再设置padding-bottom为56.25%（因为padding的百分比是按照容器宽度计算的，所以由padding来撑开容器高度，而不是height，保证了容器的宽高比例），最后设置视频绝对定位，其宽高为容器的100%
.wrap{
height: 0;
padding-bottom: 56.25%; /* 16:9 */
position: relative;
width: 100%;
}
.wrap .video{
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
}
