ウェブデザイナーの毎日のお仕事のメモ - mainichi web まいにちウェブ

作成日:2021.02.02  最終更新日:2021.02.02

CSS

簡単に画像をトリミングできるcssオプションobject-fitの使い方

写真のサイズをトリミングできるcssオプションobject-fitの使い方メモです。

object-fitの使い方

まずは、画像を1枚用意します。画像を表示させるだけなので、単純に、以下のようなimgタグのHTMLとなります。

object-fitとは

object-fit とは、cssのプロパティの1つで、 <img> タグや <video> タグなどの中身を、コンテナ内で、どのようにはめ込むのかを設定するプロパティということのようです。
今回はimgタグで説明していますが、videoタグでも使用できるようです。

HTML

<img src="img/img.jpg" alt="サンプル画像">

これだけだと、以下のように画像がそのままのサイズで表示されます。
(この画像の元々のサイズは500px*333pxです。)

サンプル画像

この画像を、正方形にトリミングしたい場合は、以下のように書けばOKです。

CSS

まず、表示したいサイズを指定し、最後にobject-fit: cover;を追加します。

img {
  width:200px;
  height:200px;
  object-fit: cover;
}

見え方は以下のようになります。

サンプル画像

object-fit: cover;と書くと、
比率を維持したまま、指定したサイズを埋めるように画像が拡大縮小して表示されるようです。

object-fit プロパティーの全ての値

上の説明では、object-fit: cover;を説明しましたが、object-fit プロパティーで使える値には、以下の5つがあります。

※imgタグの横、縦はそれぞれ200pxと指定しています。
※この画像の元々のサイズは500px*333pxです。

プロパティ 見え方
contain サンプル画像
cover サンプル画像
fill サンプル画像
none サンプル画像
scale-down サンプル画像

object-fit プロパティーの全ての値の説明

contain

画像の比率は維持したまま、要素のコンテンツボックスに収まるように拡大縮小される。

サンプル画像

cover

画像の比率は維持したまま、要素のコンテンツボックス全体を埋めるように拡大縮小される。ボックスに収まるように画像がトリミングされる。

サンプル画像

fill

画像はコンテンツボックスに合うように引き伸ばされ、全体を埋めるサイズになる。画像は全て表示される。
※これはあまり使う機会は無い気がします。

サンプル画像

none

画像は拡大縮小されない。ただ、指定した幅・高さにトリミングされるのみ。
※これはあまり使う機会は無い気がします。

サンプル画像

scale-down

 none 又は contain を指定したかのようにサイズが決められて、画像の実際のサイズが小さいほうが採用される。
ちょっと分かりにくいのですが、コンテンツボックスより画像が大きい場合は「contain」、小さい場合は「none」が指定されるということです。

サンプル画像 例えば、画像サイズ、150px*100pxの画像でobject-fit: scale-down;を指定すると、以下のような見え方になります。 ※imgタグの横、縦はそれぞれ上記と同じく200pxと指定しています。 サンプル画像

最新記事