1.padding-top

jsbin在线预览

<div class="pic-item">
  <div class='pic-con'>
    <img class="pic-img" src="https://bookcover.yuewen.com/qdbimg/349573/1015351739/180">
  </div>
</div>

.pic-item {
  width:30%;
}
.pic-con {
  position: relative;
  padding-top: 100%; /* 1:1 */
  overflow: hidden;
}
.pic-img {
  position: absolute;
  top: 0; left:0;
  width: 100%;
}