CSS百分比padding与宽度自适应图片布局

  但是有时候我们的图片是不方便作为背景图呈现的，而是内联的<img>，百分比padding也是可以轻松应对的，求套路是比较固定的，图片元素外面需要一个固定比例的容器元素，例如下面的HTML结构：

  <div class="banner">
    <img src=""banner.jpg>
  </div>
  .banner元素同样负责控制比例，然后图片填充.banner元素即可，CSS代码如下：

  .banner {
      padding: 15.15% 0 0;
      position: relative;
  }
  .banner > img {
      position: absolute;
      width: 100%; height: 100%;
      left: 0; top: 0;
  }