This method is especially helpful in laying out Instagram images in a grid since they have rolled out their non-square media ability.

// HTML
<a href="LINK_GOES_HERE" class="square">
    <img src="IMG_GOES_HERE" alt="">
</a>

// SCSS
.square {
    width: 100%;
    height: 0;
    padding-bottom: 100%;
    display: block;

    img {
        width:100%;
        height:auto;
    }
}

Published on October 19, 2017