在说容易按比例缩放前，我们先说下图片按比例缩放。
对于图片，默认只设置图片的一个宽或高，那么另一个值就会按照图片真实比例缩放，如
|
1 2 3 4 5 6 7 8 9 10 |
<img <span class="keyword">class</span>=<span class="string">"demo1"</span> src=<span class="string">"http://placehold.it/200x150"</span> alt=<span class="string">""</span>> <img <span class="keyword">class</span>=<span class="string">"demo2"</span> src=<span class="string">"http://placehold.it/400x300"</span> alt=<span class="string">""</span>> .demo1{ width: <span class="number">100</span>px;<span class="comment">/* 只设置宽度，根据等比例缩放得到高度为75px */</span> } .demo2{ height: <span class="number">150</span>px; <span class="comment">/* 只设置高度，根据等比例缩放得到宽度为200px */</span> } |
图片因为本身存在宽高比，所以设置一个值，另一个值自动也就根据真实的比例对应上，但是如果是视频呢？
一般在响应式中，我们会要求视频的宽高比为 16：9 或 4：3，这么一来就比较头大了。当用户改变浏览器宽度的时候（改变高度不考虑），视频的宽度变了，那么高度也得根据我们要求的 16：9 或 4：3 改变。
这里老外提供了一个很巧的方案：Creating Intrinsic Ratios for Video
核心思想为：提供一个容器，设置容器的高度为 0，再设置 padding-bottom 为 56.25%（因为 padding 的百分比是按照容器宽度计算的，所以由 padding 来撑开容器高度，而不是 height，保证了容器的宽高比例），最后设置视频绝对定位，其宽高为容器的 100%
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
.wrap{ height: <span class="number">0</span>; padding-bottom: <span class="number">56.25</span>%; <span class="comment">/* 16:9 */</span> position: relative; width: <span class="number">100</span>%; } .wrap .video{ position: absolute; left: <span class="number">0</span>; top: <span class="number">0</span>; width: <span class="number">100</span>%; height: <span class="number">100</span>%; } |
根据上述思想，我们再将其扩展下，应用到其他地方，如：
这是一个移动端页面的一部分，要求全屏里面正好三张图片，左右图片宽度是相等的，第一个图片和第三个图片下面要对齐，图片之间的间距为 10px。鉴于移动端的屏幕大小不等，所以使用定宽不合适。
详细请参考容器等比缩放 demo
