CSS实现宽高比效果

利用padding-bottom属性百分比是基于父元素的宽度计算的，可通过css实现宽高比效果。
例子代码如下：

<style>
        .outer {
          overflow: hidden;
          height: 0;
          padding-bottom: 50%;
          background: #ff0000;
        }
        .inner {
          float: left;
          width: 25%;
          padding-bottom: 25%;
          background: yellow;
        }
</style>

<div class="outer">
    <div class="inner"></div>
    <div class="inner"></div>
    <div class="inner"></div>
</div>