<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如何使图片固定为正方形