定義と使い方

object-fitプロパティは、
画像や動画などの置換コンテンツ（object）が、自身の要素ボックス内で、指定された幅と高さに応じてどのようにフィット（fit）して表示されるかを指定します。

このプロパティを使用すると、画像や動画を要素サイズに合わせて調整しながら、歪みなく自然に表示することができます。

基本の例

object-fitプロパティの使い方について説明します。

CSSライブデモ：object-fit デモボタンをクリックしてみてください！

形式の構文

CSS 
selector {
    object-fit: fill | contain | cover | none | scale-down
}

形式定義

object-fitプロパティは、画像や動画などの置換要素のコンテンツ（object）が、指定された高さと幅に基づいて設定されたcontent-box内で、どのようにフィット（fit）して表示されるかを指定します。主に<img>や<video>要素に使用されます。

object-fitプロパティの形式定義
初期値 fill
適用要素 置換要素（replaced elements）
継承 いいえ
アニメーション いいえ

値

object-fitプロパティの値
fill 初期値。
画像やビデオが親要素のサイズに合わせて拡大・縮小されます。アスペクト比が一致しない場合、対象要素は比率を無視して引き伸ばされることがあります。
contain 画像やビデオが親要素内でアスペクト比を維持しながら可能な限り大きく表示されます。親要素の片側にぴったり合い、もう片側は切り取られずに配置されます。
cover 画像やビデオが親要素内でアスペクト比を維持しながら、一方の軸に合わせていっぱいに拡大されて配置されます。親要素の片側が切り取られる場合があります。
none 画像やビデオが元のサイズのまま表示されます。親要素内での配置方法は制御されません。
scale-down 画像やビデオは、containとnoneの適用結果のうち、より小さいサイズで表示されます。画像が元のサイズより小さい場合はnoneと同様に動作し、画像が元のサイズより大きい場合はcontainと同様に動作します。

活用例

次の例は、object-fitプロパティの値がどのように動作し、どのように使うべきかをよく示しています。

object-fit: fill

初期値。
画像やビデオが親要素のサイズに合わせて拡大・縮小されます。アスペクト比が一致しない場合、対象要素は比率を無視して引き伸ばされることがあります。

画像の例
HTML 
<div class="container">
    <img src="flower.jpg" alt="flower">
</div>
CSS 
.container {
    width: 300px;
    height: 100px;
    border: 5px dashed red;
}
img {
    width: 100%;
    height: 100%;
    object-fit: fill;
}
実際の適用例
ビデオの例
HTML 
<div class="container">
    <video src="flower.webm" autoplay muted playsinline loop></video>
</div>
CSS 
.container {
    width: 300px;
    height: 100px;
    border: 5px dashed red;
}
video {
    width: 100%;
    height: 100%;
    object-fit: fill;
}
実際の適用例

object-fit: contain

画像やビデオが親要素内でアスペクト比を維持しながら可能な限り大きく表示されます。親要素の片側にぴったり合い、もう片側は切り取られずに配置されます。

画像の例
HTML 
<div class="container">
    <img src="flower.jpg" alt="flower">
</div>
CSS 
.container {
    width: 300px;
    height: 100px;
    border: 5px dashed red;
}
img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}
実際の適用例
ビデオの例
HTML 
<div class="container">
    <video src="flower.webm" autoplay muted playsinline loop></video>
</div>
CSS 
.container {
    width: 300px;
    height: 100px;
    border: 5px dashed red;
}
video {
    width: 100%;
    height: 100%;
    object-fit: contain;
}
実際の適用例

object-fit: cover

画像やビデオが親要素内でアスペクト比を維持しながら、一方の軸に合わせていっぱいに拡大されて配置されます。親要素の片側が切り取られる場合があります。

画像の例
HTML 
<div class="container">
    <img src="flower.jpg" alt="flower">
</div>
CSS 
.container {
    width: 300px;
    height: 100px;
    border: 5px dashed red;
}
img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
実際の適用例
ビデオの例
HTML 
<div class="container">
    <video src="flower.webm" autoplay muted playsinline loop></video>
</div>
CSS 
.container {
    width: 300px;
    height: 100px;
    border: 5px dashed red;
}
video {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
実際の適用例

object-fit: none

画像やビデオが元のサイズのまま表示されます。親要素内での配置方法は制御されません。

画像の例
HTML 
<div class="container">
    <img src="flower.jpg" alt="flower">
</div>
CSS 
.container {
    width: 300px;
    height: 100px;
    border:5px dashed red;
}
img {
    width: 100%;
    height: 100%;
    object-fit: none;
}
実際の適用例
ビデオの例
HTML 
<div class="container">
    <video src="flower.webm" autoplay muted playsinline loop></video>
</div>
CSS 
.container {
    width: 300px;
    height: 100px;
    border: 5px dashed red;
}
video {
    width: 100%;
    height: 100%;
    object-fit: none;
}
実際の適用例

object-fit: scale-down

画像やビデオは、containとnoneの適用結果のうち、より小さいサイズで表示されます。画像が元のサイズより小さい場合はnoneと同様に動作し、画像が元のサイズより大きい場合はcontainと同様に動作します。

画像の例
HTML 
<div class="container">
    <img src="flower.jpg" alt="flower">
</div>
CSS 
.container {
    width: 300px;
    height: 100px;
    border: 5px dashed red;
}
img {
    width: 100%;
    height: 100%;
    object-fit: scale-down;
}
実際の適用例
ビデオの例
HTML 
<div class="container">
    <video src="flower.webm" autoplay muted playsinline loop></video>
</div>
CSS 
.container {
    width: 300px;
    height: 100px;
    border: 5px dashed red;
}
video {
    width: 100%;
    height: 100%;
    object-fit: scale-down;
}
実際の適用例

ブラウザ互換性

object-fitプロパティのブラウザ互換性
プロパティ
デスクトップ Chrome
Chrome
デスクトップデスクトップ Edge
Edge
デスクトップ Firefox
Firefox
Safari
Safari
object-fit 32 79 36 10

仕様書

object-fitプロパティに関する仕様書
仕様書
object-fit CSS Images Module Level 3
#the-object-fit

参考資料