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
157
158
159
160
161
162
163
164
165
166
167
168
169
170
|
---
title: object-fit
slug: Web/CSS/object-fit
tags:
- CSS
- CSS Images
- CSS Property
- Reference
- 'recipe:css-property'
translation_of: Web/CSS/object-fit
---
<div>{{CSSRef}}</div>
<p><a href="/ko/docs/Web/CSS">CSS</a> <strong><code>object-fit</code></strong> 속성은 {{HTMLElement("img")}}나 {{HTMLElement("video")}} 요소와 같은 <a href="/ko/docs/Web/CSS/Replaced_element">대체 요소</a>의 콘텐츠 크기를 어떤 방식으로 조절해 요소에 맞출 것인지 지정합니다.</p>
<p>{{cssxref("object-position")}} 속성을 사용해 대체 요소 콘텐츠가 콘텐츠 박스 내에 위치할 지점을 바꿀 수 있습니다.</p>
<div>{{EmbedInteractiveExample("pages/css/object-fit.html")}}</div>
<h2 id="Syntax" name="Syntax">구문</h2>
<p><code>object-fit</code> 속성은 다음 목록 중 하나의 키워드를 사용해 지정합니다.</p>
<h3 id="Values" name="Values">값</h3>
<dl>
<dt><code>contain</code></dt>
<dd>대체 콘텐츠의 가로세로비를 유지하면서, 요소의 콘텐츠 박스 내부에 들어가도록 크기를 맞춤 조절합니다. 콘텐츠가 콘텐츠 박스 크기에 맞도록 하면서도 가로세로비를 유지하게 되므로, 서로의 가로세로비가 일치하지 않으면 객체가 <a href="https://ko.wikipedia.org/wiki/%EB%A0%88%ED%84%B0%EB%B0%95%EC%8A%A4">"레터박스"</a>처럼 됩니다.</dd>
<dt><code>cover</code></dt>
<dd>대체 콘텐츠의 가로세로비를 유지하면서, 요소 콘텐츠 박스를 가득 채웁니다. 서로의 가로세로비가 일치하지 않으면 객체 일부가 잘려나갑니다.</dd>
<dt><code>fill</code></dt>
<dd>요소 콘텐츠 박스 크기에 맞춰 대체 콘텐츠의 크기를 조절합니다. 콘텐츠가 콘텐츠 박스를 가득 채웁니다. 서로의 가로세로비가 일치하지 않으면 콘텐츠가 늘어납니다.</dd>
<dt><code>none</code></dt>
<dd>대체 콘텐츠의 크기를 조절하지 않습니다.</dd>
<dt><code>scale-down</code></dt>
<dd><code>none</code>과 <code>contain</code> 중 대체 콘텐츠의 크기가 더 작아지는 값을 선택합니다.</dd>
</dl>
<h2 id="형식_정의">형식 정의</h2>
<p>{{cssinfo}}</p>
<h2 id="형식_구문">형식 구문</h2>
<pre class="syntaxbox notranslate">{{csssyntax}}</pre>
<h2 id="예제">예제</h2>
<h3 id="이미지에_object-fit_지정">이미지에 <code>object-fit</code> 지정</h3>
<h4 id="HTML">HTML</h4>
<pre class="brush: html notranslate"><section>
<h2>object-fit: fill</h2>
<img class="fill" src="https://mdn.mozillademos.org/files/6457/mdn_logo_only_color.png" alt="MDN Logo">
<img class="fill narrow" src="https://mdn.mozillademos.org/files/6457/mdn_logo_only_color.png" alt="MDN Logo">
<h2>object-fit: contain</h2>
<img class="contain" src="https://mdn.mozillademos.org/files/6457/mdn_logo_only_color.png" alt="MDN Logo">
<img class="contain narrow" src="https://mdn.mozillademos.org/files/6457/mdn_logo_only_color.png" alt="MDN Logo">
<h2>object-fit: cover</h2>
<img class="cover" src="https://mdn.mozillademos.org/files/6457/mdn_logo_only_color.png" alt="MDN Logo">
<img class="cover narrow" src="https://mdn.mozillademos.org/files/6457/mdn_logo_only_color.png" alt="MDN Logo">
<h2>object-fit: none</h2>
<img class="none" src="https://mdn.mozillademos.org/files/6457/mdn_logo_only_color.png" alt="MDN Logo">
<img class="none narrow" src="https://mdn.mozillademos.org/files/6457/mdn_logo_only_color.png" alt="MDN Logo">
<h2>object-fit: scale-down</h2>
<img class="scale-down" src="https://mdn.mozillademos.org/files/6457/mdn_logo_only_color.png" alt="MDN Logo">
<img class="scale-down narrow" src="https://mdn.mozillademos.org/files/6457/mdn_logo_only_color.png" alt="MDN Logo">
</section></pre>
<h4 id="CSS">CSS</h4>
<pre class="brush: css notranslate">h2 {
font-family: Courier New, monospace;
font-size: 1em;
margin: 1em 0 0.3em;
}
div {
display: flex;
flex-direction: column;
flex-wrap: wrap;
align-items: flex-start;
height: 940px;
}
img {
width: 150px;
height: 100px;
border: 1px solid #000;
}
.narrow {
width: 100px;
height: 150px;
margin-top: 10px;
}
.fill {
object-fit: fill;
}
.contain {
object-fit: contain;
}
.cover {
object-fit: cover;
}
.none {
object-fit: none;
}
.scale-down {
object-fit: scale-down;
}
</pre>
<h4 id="결과">결과</h4>
<p>{{ EmbedLiveSample('이미지에_object-fit_지정', 500, 1100) }}</p>
<h2 id="Specifications" name="Specifications">명세</h2>
<table class="standard-table">
<thead>
<tr>
<th scope="col">Specification</th>
<th scope="col">Status</th>
<th scope="col">Comment</th>
</tr>
</thead>
<tbody>
<tr>
<td>{{SpecName('CSS4 Images', '#the-object-fit', 'object-fit')}}</td>
<td>{{Spec2('CSS4 Images')}}</td>
<td></td>
</tr>
<tr>
<td>{{SpecName('CSS3 Images', '#the-object-fit', 'object-fit')}}</td>
<td>{{Spec2('CSS3 Images')}}</td>
<td>Initial definition</td>
</tr>
</tbody>
</table>
<h2 id="Browser_compatibility" name="Browser_compatibility">브라우저 호환성</h2>
<p>{{Compat("css.properties.object-fit")}}</p>
<h2 id="See_also" name="See_also">같이 보기</h2>
<ul>
<li>이미지 관련 다른 CSS 속성: {{cssxref("object-position")}}, {{cssxref("image-orientation")}}, {{cssxref("image-rendering")}}, {{cssxref("image-resolution")}}.</li>
<li>{{cssxref("background-size")}}</li>
</ul>
|
