More than 1 year has passed since last update.

object-fitとは（画像のトリミング）

Posted at 2022-12-30

はじめに

object-fitの使い方と効果についての備忘録です

画像のトリミングをCSSプロパティ「object-fit」で行うことができる。
画像の縦横比を保ちながらトリミングする事ができます。

使用例(CSSサンプルコード)

object-fit:cover //中央でトリミング

.example img {
   width: 100%;
   height: 300px;
   object-fit: cover;
}
//縦横の画像比率を綺麗に保ちつつ、画像の中央でトリミングが可能