图片宽度设为百分比的情况下让图片宽高相等

html代码

<div class='box'>
    <img src="...">
</div>

CSS代码

父元素设置 
    .box {    
    position: relative;   
    width: 50%;
    }
   .box:before {       
    content: "";    
    display: block;    
    padding-top: 100%;
   }
或者 
.box{
    position: relative;
    width: 50%;
    height: 0;
    padding-bottom: 50%;
}
图片.box img {
    position:  absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

效果图

参考：https://blog.csdn.net/jinwangxp/article/details/80003956