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

igawa design.

Memo

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年以上のキャリアがありますが、一気にがぁっと書いています。(元々はメモ書きでしたので順次見直し、更新しています。) 事実や経験、調査や検証を基にしていますが、万一なにかしら不備・不足などがありましたらすみません。お知らせいただければ訂正いたします。 写真は主にUnsplashPixabayのフリー素材を利用させていただいております。その他の写真や動画もフリー素材やパブリックドメイン、購入素材、もしくは自前のものを使用しております。

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

お問い合わせ CONTACT..

    免責事項について

    • 記事ページ(Memosのページ)は当初は文字通りメモ書きでした。その後、修正や更新をしております。
    • 事実や経験、調査や検証を基にしていますが、万一なにかしら不備・不足などがありましたらすみません。お知らせいただければ早急に対応いたします。
    • 一個人のポートフォリオサイトですので、万一損害・トラブル等が発生した場合でも、一切の責任を負いかねます。

    個人情報について

    • 個人情報はお問い合わせやお客さま対応のみでの利用とさせていただいております。
    • こちらから営業目的でご連絡することはありません。
    • ご本人様の了解や、法に基づいた理由がない限り、第三者へ開示することはありません。