CSSで画像を正方形にトリミングする方法です。
レスポンシブにも対応できます。
html
<div class="contents"> <a class="contents__link" href="リンク先"> <img class="contents__thumbnail" src="画像URL"/> </a> </div>
CSS
.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; }
aタグが不要であれば別のタグでも大丈夫です。
各数字はそれぞれ調整すればOKです。