トップへ(mam-mam.net/)

CSSの「object-fit」プロパティで画像をどのように表示させるか(拡大縮小、トリミング、余白表示など)を指定する

検索:

CSSの「object-fit」プロパティで画像をどのように表示させるか(拡大縮小、トリミング、余白表示など)を指定する

CSSの「object-fit」プロパティは<img>タグや<video>タグなどのコンテンツを、そのコンテナボックスにどのように表示させるか(拡大縮小、トリミング、余白表示など)を指定するために使用します。
このプロパティは、特にレスポンシブデザインや、さまざまな画面サイズでのメディア表示に役立ちます。

CSS「object-fit」の使用例

元画像(object-fit を設定しない場合)

object-fit を設定しない場合は object-fit:fill; を設定した場合と同じ動作です。

<img src="./imgs/css_object-fit_l.png" style="width:128px;height:64px;border:1px solid #DDD;" width="256" height="128">
<img src="./imgs/css_object-fit_l.png" style="width:64px;height:128px;border:1px solid #DDD;" width="256" height="128">
<img src="./imgs/css_object-fit_p.png" style="width:64px;height:128px;border:1px solid #DDD;" width="128" height="256">
<img src="./imgs/css_object-fit_p.png" style="width:128px;height:64px;border:1px solid #DDD;" width="128" height="256">

object-fit:fill(初期値)

要素のボックスサイズにあうように、コンテンツが引き延ばされます。
アスペクト比(縦横比)は保持されません。

<img src="./imgs/css_object-fit_l.png" style="width:128px;height:64px;object-fit:fill;border:1px solid #DDD;" width="256" height="128">
<img src="./imgs/css_object-fit_l.png" style="width:64px;height:128px;object-fit:fill;border:1px solid #DDD;" width="256" height="128">
<img src="./imgs/css_object-fit_p.png" style="width:64px;height:128px;object-fit:fill;border:1px solid #DDD;" width="128" height="256">
<img src="./imgs/css_object-fit_p.png" style="width:128px;height:64px;object-fit:fill;border:1px solid #DDD;" width="128" height="256">

object-fit:contain

アスペクト比(縦横比)を保持しながら要素のボックスサイズに収まるように拡大縮小されます。
縦又は横に空白が出来て表示される場合があります。

<img src="./imgs/css_object-fit_l.png" style="width:128px;height:64px;object-fit:contain;border:1px solid #DDD;" width="256" height="128">
<img src="./imgs/css_object-fit_l.png" style="width:64px;height:128px;object-fit:contain;border:1px solid #DDD;" width="256" height="128">
<img src="./imgs/css_object-fit_p.png" style="width:64px;height:128px;object-fit:contain;border:1px solid #DDD;" width="128" height="256">
<img src="./imgs/css_object-fit_p.png" style="width:128px;height:64px;object-fit:contain;border:1px solid #DDD;" width="128" height="256">

object-fit: cover

アスペクト比(縦横比)を保持しながら要素に空白が出来ないようにボックス全体を埋めるように拡大縮小して切り取られて(トリミングされて)表示されます。

<img src="./imgs/css_object-fit_l.png" style="width:128px;height:64px;object-fit:cover;border:1px solid #DDD;" width="256" height="128">
<img src="./imgs/css_object-fit_l.png" style="width:64px;height:128px;object-fit:cover;border:1px solid #DDD;" width="256" height="128">
<img src="./imgs/css_object-fit_p.png" style="width:64px;height:128px;object-fit:cover;border:1px solid #DDD;" width="128" height="256">
<img src="./imgs/css_object-fit_p.png" style="width:128px;height:64px;object-fit:cover;border:1px solid #DDD;" width="128" height="256">

object-fit:none

コンテンツは拡大縮小されずにそのままのサイズで表示され、はみ出る場合は切り取られ、小さい場合は縦横に余白ができて表示されます。

<img src="./imgs/css_object-fit_l.png" style="width:128px;height:64px;object-fit:none;border:1px solid #DDD;" width="256" height="128">
<img src="./imgs/css_object-fit_l.png" style="width:64px;height:128px;object-fit:none;border:1px solid #DDD;" width="256" height="128">
<img src="./imgs/css_object-fit_p.png" style="width:64px;height:128px;object-fit:none;border:1px solid #DDD;" width="128" height="256">
<img src="./imgs/css_object-fit_p.png" style="width:128px;height:64px;object-fit:none;border:1px solid #DDD;" width="128" height="256">

object-fit: scale-down

「object-fit:none」又は「object-fit:contain」のうち、オブジェクトを表示するサイズが小さくなるほうを採用して表示します。 (containと同じだが、noneの方が画像が小さくなる場合はnoneと同じ動きになる。)

<img src="./imgs/css_object-fit_l.png" style="width:128px;height:64px;object-fit:scale-down;border:1px solid #DDD;" width="256" height="128">
<img src="./imgs/css_object-fit_l.png" style="width:64px;height:128px;object-fit:scale-down;border:1px solid #DDD;" width="256" height="128">
<img src="./imgs/css_object-fit_p.png" style="width:64px;height:128px;object-fit:scale-down;border:1px solid #DDD;" width="128" height="256">
<img src="./imgs/css_object-fit_p.png" style="width:128px;height:64px;object-fit:scale-down;border:1px solid #DDD;" width="128" height="256">

CSS「object-position」を併用する

CSS「object-position:ボックスのX方向 ボックスのY方向」を使用すると配置位置を指定できます。
object-position: 50% 50%
が初期値です。

<img src="./imgs/css_object-fit_l.png" style="width:128px;height:64px;object-fit:none;object-position:50% 50%;border:1px solid #DDD;" width="256" height="128">
<img src="./imgs/css_object-fit_l.png" style="width:128px;height:64px;object-fit:none;object-position:left top;border:1px solid #DDD;" width="256" height="128">
<img src="./imgs/css_object-fit_l.png" style="width:128px;height:64px;object-fit:cover;object-position:80px 10px;border:1px solid #DDD;" width="256" height="128">
<img src="./imgs/css_object-fit_p.png" style="width:128px;height:64px;object-fit:cover;object-position:50% 80%;border:1px solid #DDD;" width="256" height="128">