object-fitで画像に統一感を。CSSだけでトリミングやサイズを調整。|デザイナー、コーチ、ディレクターズメモ|井川igawa.

Memo

object-fitで画像に統一感を。CSSだけでトリミングやサイズを調整。

object-fitでトリミングやサイズ調整を。

object-fitで画像に統一感を。CSSだけでトリミングやサイズを調整。

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

coverでのトリミングが便利。

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

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


object-fitの種類。

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

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

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

fill

例)

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

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

object-fitで、ひまわりをトリミング。
object-fitで、ひまわりをトリミング。

contain

例)

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

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

(※「background-size: contain;」と似た挙動。)

object-fitで、ひまわりをトリミング。
object-fitで、ひまわりをトリミング。

cover

例)

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

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

(※「background-size: cover;」と似た挙動。)

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

object-fitで、ひまわりをトリミング。
object-fitで、ひまわりをトリミング。

none

例)

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

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

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

object-fitで、ひまわりをトリミング。
object-fitで、ひまわりをトリミング。

scale-down

例)

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

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

object-fitで、ひまわりをトリミング。
object-fitで、ひまわりをトリミング。


「hover」や「border-radius」と組み合わせても面白そう。

「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で、ひまわりをトリミング。
object-fitで、ひまわりをトリミング。


疲れた時は、栄養を。
ポスト投函で届く、人気のブドウ糖です。
砂糖の代わりにコーヒーや紅茶などに。

Webデザインは実務数年、職業訓練校講師数年、フリーランス数年、計15年以上のキャリアがありますが、一気にがぁっと書いています。(元々はメモ書きでしたので順次見直し、更新しています。) 事実や経験、調査や検証を基にしていますが、万一なにかしら不備・不足などがありましたらすみません。お知らせいただければ訂正いたします。 写真や動画はフリー素材、購入素材、もしくは自前のものを使用しております。

井川 宜久 | Norihisa Igawa
デザイナー、ディレクター、講師、コーチ / 井川宜久

お問い合わせ CONTACT..

    Name(required)お名前 (必須)
    Furigana(required)ふりがな (必須)
    Email(required)メールアドレス (必須)
    Phone Number(required)電話番号 (必須)
    Message(required)ご質問・ご要望 (必須)


    免責事項について

    • 事実や経験、調査や検証を基にしていますが、私はただの人間です。万一なにかしら不備・不足などがありましたらすみません。お知らせいただければ訂正いたします。
    • 万一損害・トラブル等が発生した場合でも、一切の責任を負いかねます。