使用padding使图片等比例缩放

html如下：

<div class="box">
    <img src="a.jpg" alt="">
</div>

css如下：

.box{
  position:relative;
  padding-bottom: 116%;
  height:0;
  overflow:hidden;
}
img{
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:100%;
}

这其中padding-bottom的百分数值就是原图片的 height/width 的比例，这样设置的原因是padding值如果设置为百分比值，计算的时候会使用当前元素的width为基础来计算。

实际效果：

实际效果请看。