CSSのobject-fitの使い方。トリミングやサイズの実装例。
Contents - 目次
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;
}
以上、参考になれば幸いです。
※Webデザインは実務数年、職業訓練校講師数年、フリーランス数年、計15年以上のキャリアがありますが、一気にがぁっと書いているので「です・ます調」ではありません。(元々はメモ書きでした。) ※事実や経験、調査や検証を基にしていますが、万一なにかしら不備・不足などがありましたらすみません。お知らせいただければ訂正いたします。 ※写真は主にUnsplashやPixabayのフリー素材を利用させていただいております。その他の写真や動画もフリー素材やパブリックドメイン、もしくは自前のものを使用しております。