padding的百分比

        在pc端 我们可能随意设置图片的固定宽高，但是在移动端，固定宽高就是济几给济几刨坑，这时候，padding就起了很大的作用。在css中，padding的百分比都是相对于宽度计算的。由于移动端的屏幕宽度是各不相同的，有的是414，有的是375，还有的是360或者320的，图片在不同的宽度下需要固定图片的宽高比例而不是图片的宽高大小。

        有时候我们可以设置图片为背景图片，固定一个高度，然后background-size: cover，但是随着宽度的变化 高度就不太合适了，￣□￣｜｜这时候，padding就起大作用了：padding: 63% 0 0;background: url("../../../static/img/13.jpg") no-repeat center; background-size: cover; 这样使用padding百分比，图片比例都是恒定不变的。如图1。

图1 背景图效果

        但是，有一些不方便用背景图片的地方，比如我们用的图片都是请求接口获取的时候，这时候就该用到img标签了，只要图片外面有一个固定比例的盒子，同样能达到不同宽度下相同比例的图片。如图2。

图2 img效果图

        代码如下图3和图4：

图3 html部分

图4 css部分