<div class="thumbs">
  <a href="#">
    <img src="http://www.pakutaso.com/assets_c/2016/05/P1070936-thumb-autox1600-22115.jpg" alt="photo by PAKUTASO">
  </a>
</div>
.thumbs{
  width: 100%;
  height: 100%;
  max-width: 150px;
  position: relative;
}
.thumbs::before{
  content: "";
  display: block;
  padding-top: 100%;
}
.thumbs a{
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
}
.thumbs img{
  width: 100%;
  height: auto;
  line-height: 0;
  position: absolute;
  bottom: 0;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.