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

2018年4月2日2021年9月27日

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です。