【 CSS】レスポンシブでも綺麗な正方形に画像をトリミングする

<div class="contents">
    <a class="contents__link" href="リンク先">
        <img class="contents__thumbnail" src="画像URL"/>
    </a>
</div>

.contents{
    height: 100%;
    max-width: 150px;
    position: relative;
}

.contents__link{
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.contents__thumbnail{
    width: 150%;
    height: auto;
    line-height: 0;
    position: absolute;
    bottom: 0;
    left: -30%;
    top: 0;
    margin: auto;
}