css 宽高等比例设置

往往在处理自适应的图片在渲染为正方形的时候：第一种想法就是把图片裁剪成宽高比例1:1的图形；第二种方式我们使用js去控制图片img父盒子div的高度去和宽度相等（以上方式就比较繁琐了）；第三种使用简单的css去控制。下面就说下第三种方式啦！
html格局为：

<div class="box">
	<img src="图片路径" alt="">
</div>

css布局：

.box{
    width: 40%;  // 父盒子的宽度%，自适应  看实际情况去设置百分比 
    position: relative;
    img {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
    }
}
.box::before{
    display: block;
    content: '';
    width: 100%;
    padding-top: 100%;   // 最重要的，利用伪元素的padding-top(也可以使用padding-bottom)去撑开box盒子的高度，100%是定撑开的高度所占的比
}