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

<div class='box'>

<img src="...">

</div>

父元素设置

    .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%;

}