使用padding百分比控制展示位图片大小

写商品展示位时，后台给的图片大小不一定相同，因此为了使图片大小相同，需要给图片宽度和高度，这样不利于代码封装。

现在我们有一种方法，可以不需要给图片确定的数值，通过设置img的父盒子的padding值来调整图片大小，这样，当这个图片展示位一行展示3个或4个或者任何几个图片的时候，图片的大小都会自动调整而不用一个个写了。

<div class="grandpa">
        <div class="father">
            <img class="son"></img>
        </div>
        <div>你好啊,李银河</div>
    </div>

<style>
        .grandpa {
            margin: 100px auto;
            width: 400px;
            height: 400px;
            background-color: pink;
            box-sizing: border-box;
        }

        .father {
            background-color: yellow;
            position: relative;
            padding: 66% 10px 0;
        }

        .son {
            position: absolute;
            left: 0;
            top: 0;
            background-color: skyblue;
            position: absolute;
            width: 100%;
            height: 100%;
        }
    </style>

grandpa盒子需要有宽度，而他的宽度可以是版心的25%或者其他自动设置，这里为了演示，写为400px;

father盒子的padding值有3个参数，分别是上边距，左右边距和下边距；上边距设置为66%即为grandpa盒子的66%，这样grandpa盒子的宽度变更后，father盒子的padding值会自动变更，里面宽度和高度均为father盒子100%的img盒子的宽度和高度也就会自动变更。