【CSS】画像を正方形にトリミングする方法

以前にもエリアを正方形に描画する方法について紹介しましたが、今回は画像を正方形にトリミングする方法について。
レスポンシブ対応なので、横幅はパーセントで指定できます。

なお、前回の記事はこちらから。

【CSS】パーセントで指定した横幅に応じた正方形のエリアを描画する

Div 要素を正方形にしたい場合はこちらの方法で問題なく実装できます。

今回参考にさせていただいた記事はこちら。

レスポンシブ対応　画像を正方形にトリミングするCSS « グリニッジ株式会社
https://www.greenwich.co.jp/blog-archives/p/7086

HTML のコードはこちら。

<div class="thumbs">
  <img src="[画像のパス]" />
</div>

CSS はこちら。

.thumbs {
  width: 100%;
  max-width: 150px;
  position: relative;
}
.thumbs::before {
  content: "";
  display: block;
  padding-top: 100%;
}
.thumbs img {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  object-fit: cover;
}

なお、サンプルコードから a タグを削除しているので、それに合わせて CSS を一部修正してあります。
コードは以上です！

前回ご紹介した正方形の描画方法では、画像を追加したときにデザインが崩れたので、画像を表示させたい場合はこちらの方法をご利用ください。

以上、画像を正方形にトリミングする方法でした。
是非ご活用ください。