通过padding固定图片宽高比

固定图片宽高比是项目中比较常见的需求，这样可以使得图片在不同分辨率屏幕上保持相同的的比例从而不会变形。实现起来很简单。

<div class="wrap">
  <img src="xxx.png"  class="img"/>
</div>

/*
*父元素通过通过padding撑开相同宽高比的内容区域
*padding的百分比值是相对该元素的宽度计算的
*1.图片宽度为页面100% 比例固定
*比如图片宽高比是 2.4:1  那么padding-bottom 或padding-top 应该为 100%/2.4=41.66%
*/
.wrap {
  position: relative;
  width: 100%;
  padding-bottom: 41.66%; 
}

/*
*2.图片宽度为页面一部分
*例.图片左侧留10% 右侧留150px 剩余空间显示图片并且固定宽高比为 2.4:1
*/
.wrap {
  position: relative;
  width: calc(100% - 10% - 150px);
  padding-bottom: calc((100% - 10% - 150px) / 2.4);
  /*calc计算函数 运算符前后必须要有一个空格才会生效*/
}
/*
*图片相对父元素绝对定位脱离文档流
*宽度100%，高度100% 从而填满父元素达到固定宽高比的效果
*/
.img {
 position: absolute;
 top: 0;
 left: 0;
 width: 100%;
 height: 100%;
}