本文作者：IMWeb 结一
未经同意，禁止转载
在说容易按比例缩放前，我们先说下图片按比例缩放。
对于图片，默认只设置图片的一个宽或高，那么另一个值就会按照图片真实比例缩放，如
.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%;
}
根据上述思想，我们再将其扩展下，应用到其他地方，如：
这是一个移动端页面的一部分，要求全屏里面正好三张图片，左右图片宽度是相等的，第一个图片和第三个图片下面要对齐，图片之间的间距为10px。鉴于移动端的屏幕大小不等，所以使用定宽不合适。
如果觉得《等比例缩放html5页面 css中如何做到容器按比例缩放》对你有帮助，请点赞、收藏，并留下你的观点哦！
