css中如何做到容器按比例缩放

本文作者：IMWeb 结一 原文出处：IMWeb社区 未经同意，禁止转载

在说容易按比例缩放前，我们先说下图片按比例缩放。

对于图片，默认只设置图片的一个宽或高，那么另一个值就会按照图片真实比例缩放，如

<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改变。

这里老外提供了一个很巧的方案：Creating Intrinsic Ratios for Video

核心思想为：提供一个容器，设置容器的高度为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。鉴于移动端的屏幕大小不等，所以使用定宽不合适。

详细请参考容器等比缩放demo