百分比布局下图片实现自适应

网上学的方法,无论页面怎么拉伸,宽高比都不会变,而且上下也不会留白影响布局
缺点:以后如果替换图片的话需要换宽高比一样的图片,不然就要修改padding-top值,适用于用户不经常修改的图片.

1.先查看图片的宽和高,计算出比例

QQ截图20190131232700.png

以上图为例,1245 / 592=2.1

2.计算padding值
图片外面需包裹一个div, 100% / 2.1 = 47.6%,得出padding-top:47.6%:

.firstPic{
      width:100%;
      //若更换图片需修改padding
      padding-top:47.6%;
      position: relative;
      img{
        left: 50%;
        top:50%;
        width: 100%;
        position: absolute;
        transform:translate(-50%,-50%);
      }
    }