CSSのobject-fitの使い方。トリミングやサイズの実装例。 / メモ / いがわ

CSSのobject-fitの使い方。トリミングやサイズの実装例。

2022.09.08 2023.11.29更新。

Contents - 目次

1 CSSのobject-fitプロパティでできること。
2 object-fitの種類。
3 object-fitと、「hover」や「border-radius」と組み合わせ。
4 CSS 関連メモ。

CSSのobject-fitプロパティでできること。

object-fitでのトリミングが便利。

imgやvideoのサイズをCSSで指定したい時、object-fitプロパティが使える。

要素のボックス内で画像や動画の配置指定ができるので、サイト内に並べる際に、見た目や動きの統一化がしやすい。

object-fitの種類。

object-fit

object-fitプロパティには、2022年4月現在、5つの値が指定できる。

以下、左がobject-fit適用前、右がobject-fitを適用後の画像例。

（※要素の幅を30%、高さを200pxで統一。ボックス内での見え方がわかりやすいように、仮のborderを指定。）

fill

例）

.fill {
 width: 30%;
 height: 200px;
 object-fit: fill;
}

object-fitの初期値。ボックス全体を埋めるサイズになる。アスペクト比（縦横比）が合わない場合は比率を保たず伸縮される。

contain

例）

.contain {
 width: 30%;
 height: 200px;
 object-fit: contain;
}

ボックス内に隙間ができるが、アスペクト比を保って収まるように拡大・縮小されるので余白ができる。

（※「background-size: contain;」と似た挙動。）

cover

例）

.cover {
 width: 30%;
 height: 200px;
 object-fit: cover;
}

ボックスのサイズで、元画像がトリミングされる。位置の基準は「object-position」で指定ができ、初期値は「center（50% 50%）」。

（※「background-size: cover;」と似た挙動。）

参照：object-position – CSS: カスケーディングスタイルシート | MDN

none

例）

.none {
 width: 30%;
 height: 200px;
 object-fit: none;
}

CSSでサイズ指定する前の、元画像のオリジナルサイズで表示される。位置の基準の初期値は「cover」同様「object-position: center;」。

（※今回の使用画像は1280px × 1920px。それをCSSで縦300px幅30%と小さくしているので、見た目では拡大されたように見えている。）

scale-down

例）

.scale-down {
 width: 30%;
 height: 200px;
 object-fit: scale-down;
}

「none」と「contain」で指定した場合に、小さく（スケールダウン）した方の見え方となる。

object-fitと、「hover」や「border-radius」と組み合わせ。

object-fit: cover;

「object-fit: cover;」に「border-radius」を追加したり、hoverのスタイルをtransformやtransitionなどと組み合わせてみると面白い動き、楽しいUI/UXにできるかもしれない。

例）

.exsample {
 width: 30%;
 height: 200px;
 object-fit: cover;
 border-radius: 50px;
 object-position: bottom;
 transition: all 0.3s ease 0s;
 cursor: pointer;
}
.exsample:hover {
 object-position: top;
}

object-fitは、覚えておくと色々と便利。

CSSのobject-fitの使い方。トリミングやリサイズの猫ちゃん。

以上、参考になれば幸いです。

※Webデザインは実務数年、職業訓練校講師数年、フリーランス数年、計15年以上のキャリアがありますが、一気にがぁっと書いているので「です・ます調」ではありません。（元々はメモ書きでした。） ※事実や経験、調査や検証を基にしていますが、万一なにかしら不備・不足などがありましたらすみません。お知らせいただければ訂正いたします。 ※写真は主にUnsplashやPixabayのフリー素材を利用させていただいております。その他の写真や動画もフリー素材やパブリックドメイン、もしくは自前のものを使用しております。