blob: d544d45920607724d27ac4c33dc36a9f96587871 (
plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
|
---
title: object-fit
slug: Web/CSS/object-fit
tags:
- CSS
- CSS 画像
- CSS プロパティ
- レイアウト
- Reference
- css レイアウト
- object-fit
- recipe:css-property
- 寸法
browser-compat: css.properties.object-fit
translation_of: Web/CSS/object-fit
---
{{CSSRef}}
[CSS](/ja/docs/Web/CSS) の **`object-fit`** プロパティは、[置換要素](/ja/docs/Web/CSS/Replaced_element)、例えば {{HTMLElement("img")}} や {{HTMLElement("video")}} などの中身を、コンテナーにどのようにはめ込むかを設定します。
要素のボックス内における置換要素の中身のオブジェクトの配置を変更するには、 {{cssxref("object-position")}} プロパティを使用することができます。
{{EmbedInteractiveExample("pages/css/object-fit.html")}}
## 構文
```css
object-fit: contain;
object-fit: cover;
object-fit: fill;
object-fit: none;
object-fit: scale-down;
/* グローバル値 */
object-fit: inherit;
object-fit: initial;
object-fit: revert;
object-fit: unset;
```
`object-fit` プロパティは、以下の一覧の中からキーワードを一つ選んで指定します。
### 値
- `contain`
- : 置換コンテンツはアスペクト比を維持したまま、要素のコンテンツボックスに収まるように拡大縮小されます。オブジェクト全体がボックス内に表示され、アスペクト比が維持されるので、オブジェクトのアスペクト比とボックスのアスペクト比が合わない場合は、[レターボックス](https://ja.wikipedia.org/wiki/%E3%83%AC%E3%82%BF%E3%83%BC%E3%83%9C%E3%83%83%E3%82%AF%E3%82%B9_(%E6%98%A0%E5%83%8F%E6%8A%80%E8%A1%93))表示になります。
- `cover`
- : 置換コンテンツはアスペクト比を維持したまま、要素のコンテンツボックス全体を埋めるように拡大縮小されます。オブジェクトのアスペクト比がボックスのアスペクト比と合わない場合は、オブジェクトの方が合うように切り取られます。
- `fill`
- : 置換コンテンツは、要素のコンテンツボックス全体を埋めるサイズになります。オブジェクト全体が完全にボックスの中を埋めます。オブジェクトのアスペクト比がボックスのアスペクト比と合わない場合は、オブジェクトは合うように引き伸ばされます。
- `none`
- : 置換コンテンツは、拡大縮小されません。
- `scale-down`
- : コンテンツは `none` または `contain` を指定したかのようにサイズが決められ、オブジェクトの実際のサイズが小さいほうを採用します。
## 公式定義
{{cssinfo}}
## 形式文法
{{csssyntax}}
## 例
<h3 id="Setting_object-fit_for_an_image">画像に object-fit を設定</h3>
#### HTML
```html
<section>
<h2>object-fit: fill</h2>
<img class="fill" src="mdn_logo_only_color.png" alt="MDN Logo">
<img class="fill narrow" src="mdn_logo_only_color.png" alt="MDN Logo">
<h2>object-fit: contain</h2>
<img class="contain" src="mdn_logo_only_color.png" alt="MDN Logo">
<img class="contain narrow" src="mdn_logo_only_color.png" alt="MDN Logo">
<h2>object-fit: cover</h2>
<img class="cover" src="mdn_logo_only_color.png" alt="MDN Logo">
<img class="cover narrow" src="mdn_logo_only_color.png" alt="MDN Logo">
<h2>object-fit: none</h2>
<img class="none" src="mdn_logo_only_color.png" alt="MDN Logo">
<img class="none narrow" src="mdn_logo_only_color.png" alt="MDN Logo">
<h2>object-fit: scale-down</h2>
<img class="scale-down" src="mdn_logo_only_color.png" alt="MDN Logo">
<img class="scale-down narrow" src="mdn_logo_only_color.png" alt="MDN Logo">
</section>
```
#### CSS
```css
h2 {
font-family: Courier New, monospace;
font-size: 1em;
margin: 1em 0 0.3em;
}
img {
width: 150px;
height: 100px;
border: 1px solid #000;
margin: 10px 0;
}
.narrow {
width: 100px;
height: 150px;
}
.fill {
object-fit: fill;
}
.contain {
object-fit: contain;
}
.cover {
object-fit: cover;
}
.none {
object-fit: none;
}
.scale-down {
object-fit: scale-down;
}
```
#### 結果
{{ EmbedLiveSample('Setting_object-fit_for_an_image', 500, 1100) }}
## 仕様書
{{Specifications}}
## ブラウザーの互換性
{{Compat}}
## 関連情報
- その他の画像関連 CSS プロパティ: {{cssxref("object-position")}}, {{cssxref("image-orientation")}}, {{cssxref("image-rendering")}}, {{cssxref("image-resolution")}}
- {{cssxref("background-size")}}
|
