<div class="wrap">
  <div class="div">
    <img src="a.jpg">
  </div>
</div>

<style>
  .wrap{
    width:50%;
  }
  .div{
    width:100%;
    height:0;
    padding-bottom:100%;
    position:relative;
  }
  .div img{
    width:100%;
    height:100%;
    position:absolute;
    border: 1px solid red;
  }
</style>

参考
119.css如何使图片固定为正方形