用padding-top实现图片的自适应展示

对于需要保持高宽比的图，应该用 padding-top 实现

原理

要使图片等比例展示，需要将图片宽度和高度以一个基准来计算。 padding-top用%单位时，表示占父元素宽度的百分比。基于此，将一个元素的高度用padding-top %表示时，就可以等比例展示一个元素。

等比例展示元素

比如，画一个宽高比为1：2的长方形，将元素的宽度设置为父元素的10%，将元素的padding-top 20%作为元素的高度。 codepen.io/denghuijie/…

<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>

html,body{
  padding: 0;
  margin: 0;
  font-size: 0;
}
div{
  display: inline-block;
  padding-top: 40%;
  height: 0;
  background: red;
  width: 20%;
}
div:nth-child(3n+1){
  background: blue;
}
div:nth-child(3n+2){
  background: yellow;
}

等比例展示宽高比

将图片放到，等比例展示的元素中，使用绝对定位，即可固定图片的宽高比。

codepen.io/denghuijie/…

<div>
  <img src="//iconfont.alicdn.com/s/c30bea48-04a8-4114-84bb-bb84ecfd05ba_origin.svg" >
</div>
<div>
  <img src="//iconfont.alicdn.com/s/6fe16527-0a9e-4c49-abb9-3d23bf695a19_origin.svg" >
</div>
<div>
  <img src="//iconfont.alicdn.com/s/c0541005-51e3-4b43-bc48-99910d00965d_origin.svg" >
</div>
<div>
  <img src="//iconfont.alicdn.com/s/c0541005-51e3-4b43-bc48-99910d00965d_origin.svg" >
</div>
<div>
  <img src="//iconfont.alicdn.com/s/c0541005-51e3-4b43-bc48-99910d00965d_origin.svg" >
</div>

html,body{
  padding: 0;
  margin: 0;
  font-size: 0;
}
div{
  display: inline-block;
  position: relative;
  padding-top: 20%;
  height: 0;
  background: red;
  width: 20%;
}
div:nth-child(2n+1){
  background: blue;
}
img{
  position: absolute;
  width: 100%;
  height: auto;
  left: 0;
  top: 0; 
}

总结

元素的高度用padding-top %单位表示，是指占父元素的宽度的百分比。宽度用%比表示，是指占父元素的宽度百分比。因此，元素的宽度和高度都是父元素宽度的百分比表示。从而当屏幕大小变化时，保持元素的宽度和高度比值不变。