CSSで画像を親要素にはめ込みたいけど思うようにいかない・・・横幅をいっぱいにすると親要素から高さがはみ出たり、アスペクト比（縦横比）が変わったり・・・そんなときは「object-fit」プロパティを使います。
ということで今回は、CSSの「object-fit」プロパティについて書いていきます。
object-fitを指定しないとどうなる？
まず最初に、object-fitを指定しなかったらどうなるのか見ていきます。
親要素のサイズが幅 800px, 高さ 200pxだとします。
<div class="container"></div>.container {
width: 800px;
height: 200px;
}
ここに幅 600px, 高さ 400pxの画像を持ってくると次のような感じになります。
<div class="container">
<img src="img/画像のファイル名.jpg" alt="画像">
</div>
画像サイズそのままなので、幅は親要素に足らず高さははみ出しています。
次に幅を親要素に揃えます。
img {
width: 100%;
}
次に「inherit」で親要素の高さを引き継ぎます。
img {
width: 100%;
height: inherit;
}
親要素のサイズに収まりましたが縦方向に縮んでしまいました。
object-fitの指定
では、CSSで「object-fit」を指定していきましょう。
1. object-fit: fill;
まずは初期値の「fill」から。
img {
width: 100%;
height: inherit;
object-fit: fill;
}
この値は、画像全体で親要素を隙間なく埋めます。つまり親要素と画像のサイズが違う場合、画像は伸縮されアスペクト比は崩れます。今回の例では既に親要素に画像が収まるように指定していたので変化がありませんでした。
2. object-fit: contain;
次は「contain」です。
img {
width: 100%;
height: inherit;
object-fit: contain;
}
この値は、アスペクト比を維持したまま、画像全体を親要素に収めるために拡大縮小します。そのため今回の例では横方向に余白ができています。
3. object-fit: cover;
次は「cover」です。
img {
width: 100%;
height: inherit;
object-fit: cover;
}
この値は、アスペクト比を維持したまま、画像を親要素の隙間なく埋まるように拡大縮小します。画像のサイズが親要素と合わない場合は、画像のはみ出た部分がカットされます。
4. object-fit: none;
次は「none」です。
img {
width: 100%;
height: inherit;
object-fit: none;
}
この値は、画像の元のサイズのまま拡大縮小されません。画像サイズが親要素より大きい場合は、はみ出た部分がカットされ、画像サイズが親要素より小さい場合は余白ができます。
5. object-fit: scale-down;
次は「scale-down」です。
img {
width: 100%;
height: inherit;
object-fit: scale-down;
}
この値は、画像が親要素より大きい場合は、アスペクト比は維持したまま、画像全体が親要素に収まるように縮小され、画像が親要素より小さい場合は拡大されず画像本来のサイズのまま表示されます。つまり、画像 > 親要素で「contain」と同じ動きになり、画像 < 親要素で「none」と同じ動きになります。
まとめ
では、値のおさらいです。
- 「fill」・・・ 画像全体で親要素を隙間なく埋める。親要素と画像のサイズが違う場合、画像は伸縮されアスペクト比は崩れる。
- 「contain」 ・・・ アスペクト比は維持したまま、画像全体を親要素に収めるために拡大縮小する。
- 「cover」・・・ アスペクト比は維持したまま、画像を親要素の隙間なく埋まるように拡大縮小する。画像のサイズが親要素と合わない場合は、画像のはみ出た部分がカットされる。
- 「none」 ・・・ 画像の元のサイズのまま拡大縮小されない。画像サイズが親要素より大きい場合は、はみ出た部分がカットされ、画像サイズが親要素より小さい場合は余白ができる。
- 「scale-down」・・・ 画像が親要素より大きい場合は、アスペクト比は維持したまま、画像全体が親要素に収まるように縮小され、画像が親要素より小さい場合は拡大されず画像本来のサイズのまま表示される。画像 > 親要素で「contain」と同じ動き、画像 < 親要素で「none」と同じ動きになる。
それぞれに特徴があり、臨機応変に使い分けたいですね。
以上、CSSの「object-fit」プロパティの解説でした！
