图片，背景图片的响应式布局

网页布局，如全屏轮播等，或者其他需要根据宽高等比缩放的图片。对于图片布局来说，如果高度自适应的话，一开始父级高度为0，需要等图片加载完成之后，才能撑开父级div，这样会对整体布局有影响，存在闪动效果，用户体验不佳。而且会影响js计算模块高度的等问题。

javaScript动态计算高度

对全屏显示的图片，根据图片宽高比动态计算出图片的高度，赋值给父级div。
这一方法有种，杀鸡焉用牛刀的感觉。

图片占位

根据图片比例选取一个透明的占位图，用来撑开父级div。里面的图片用position：absolute定位。自适应整个盒子。

不足：额外请求一张图片；也需要等图片加载出来，才能撑开父级div。

padding值

利用padding取值百分比来设定高度。垂直高度的padding取百分比值的时候，是相当于其父级的宽度的。

<div class="wrap">
    <div class="img_box">
        <img src="" / >
    </div>
</div>

css:
.wrap{
    position: relative;
    margin: 5% 10%;
    border: 1px solid #ccc;
 }
 .wrap:before{
     content: '';
    display: block;
    width: 100%;
    padding-top: 100%;
 }
 .img_box{
     position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: #fff;
 }
 .img_box img{
    max-width: 100%;
    height: auto;
    width:100%;
    vertical-align: top;
  }