padding百分比实现全屏宽度图片自适应

1、问题引出

我们在做项目的时候，很多时候会看到在页面头部有一个横贯整个屏幕的banner图，通常的做法可能是给图片设置绝对定位，让图片相对整个屏幕居中显示。常见的css代码如下所示：

 .wrapper {
    position: relative;
    height: 416px;
  }

  .wrapper > img{
    position: absolute;
    left: 50%;
    margin-left: -960px;
    height: 100%;
  }

当我们手动调整屏幕大小时，上述的处理方式会有一些小小的问题：

1. banner图两侧的内容会被隐藏掉，用户无法预览到整张图片信息；
   
2. banner图片高度太高会导致下面的主体内容展示很少；
   

问题如下gif图所示：

2、如何解决

在解决问题之前，我们需要明白一点的是：padding的百分比值无论是水平方向还是垂直方向都是相对于宽度来计算的！

具体的解决思路：就是通过设定padding的百分比值，padding在垂直方向和水平方向设定的百分比值为图片实际的高宽比值。

下面我以图片（宽*高:1920px*416px）为例：

  .wrapper {
    position: relative;
    padding: 10% 46%;
  }

  .wrapper > img{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
  } 

修改之后的效果图如下:

这样的话我们就做到了对图片自适应的一个处理，上述方法就实现了一个高宽比为1：4.6的固定比例的头图效果，无任何兼容性问题！

3、小结

如果有什么疑问或者更好的建议，欢迎在评论区留言。文笔有限，文中若有不正之处，万望告知！