`object-fit` 및 `object-position` 속성

Articles

CSS 소개

이 글에서는 object-fit 및 object-position 속성에 대해 설명합니다.

이미지와 비디오 같은 객체를 정렬하는 방법과 CSS에 구현하는 방법을 배울 수 있습니다.

YouTube Video

미리보기를 위한 HTML

css-object-fit-position.html

  1<!DOCTYPE html>
  2<html lang="en">
  3<head>
  4    <meta charset="UTF-8">
  5    <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6    <title>CSS Properties Example</title>
  7    <link rel="stylesheet" href="css-base.css">
  8    <link rel="stylesheet" href="css-object-fit-position.css">
  9</head>
 10<body>
 11    <!-- Header -->
 12    <header>
 13        <h1>CSS Properties For Object</h1>
 14    </header>
 15
 16    <!-- Main content -->
 17    <main>
 18        <header>
 19            <h2>Object Fit And Object Position Properties</h2>
 20        </header>
 21        <article>
 22            <h3>object-fit</h3>
 23            <section style="width: 100%; height: 300px;">
 24                <header><h4>object-fit: fill</h4></header>
 25                <section class="sample-view" style="width: 100px; height: 100px;">
 26                    <img class="object-fit-fill" src="example.jpg" alt="Example Image">
 27                </section>
 28                <header><h4>object-fit: contain</h4></header>
 29                <section class="sample-view" style="width: 100px; height: 100px;">
 30                    <img class="object-fit-contain" src="example.jpg" alt="Example Image">
 31                </section>
 32                <header><h4>object-fit: cover</h4></header>
 33                <section class="sample-view" style="width: 100px; height: 100px;">
 34                    <img class="object-fit-cover" src="example.jpg" alt="Example Image">
 35                </section>
 36                <header><h4>object-fit: none</h4></header>
 37                <section class="sample-view" style="width: 100px; height: 100px;">
 38                    <img class="object-fit-none" src="example.jpg" alt="Example Image">
 39                </section>
 40                <header><h4>object-fit: scale-down</h4></header>
 41                <section class="sample-view" style="width: 100px; height: 100px;">
 42                    <img class="object-fit-scale-down" src="example.jpg" alt="Example Image">
 43                </section>
 44            </section>
 45        </article>
 46        <article>
 47            <h3>object-fit : cover</h3>
 48            <section>
 49                <header><h4>CSS</h4></header>
 50<pre class="sample">
 51.background-image-cover img {
 52    width: 100%;
 53    height: 100%;
 54    object-fit: cover;
 55}
 56</pre>
 57                <header><h4>HTML</h4></header>
 58<pre>
 59&lt;div class=&quot;background-image-cover&quot;&gt;
 60    &lt;img src=&quot;example.jpg&quot; alt=&quot;Example Image&quot;&gt;
 61&lt;/div&gt;
 62</pre>
 63                <header><h4>HTML+CSS</h4></header>
 64                <section class="sample-view">
 65                    <div class="image-container-cover">
 66                        <img src="example.jpg" alt="Example Image">
 67                    </div>
 68                </section>
 69            </section>
 70        </article>
 71        <article>
 72            <h3>object-fit : contain</h3>
 73            <section>
 74                <header><h4>CSS</h4></header>
 75<pre class="sample">
 76.background-image-contain img {
 77    width: 100%;
 78    height: 100%;
 79    object-fit: contain;
 80}
 81</pre>
 82                <header><h4>HTML</h4></header>
 83<pre>
 84&lt;div class=&quot;background-image-contain&quot;&gt;
 85    &lt;img src=&quot;example.jpg&quot; alt=&quot;Example Image&quot;&gt;
 86&lt;/div&gt;
 87</pre>
 88                <header><h4>HTML+CSS</h4></header>
 89                <section class="sample-view">
 90                    <div class="image-container-contain">
 91                        <img src="example.jpg" alt="Example Image">
 92                    </div>
 93                </section>
 94            </section>
 95        </article>
 96        <article>
 97            <h3>object-fit Common Mistake Example</h3>
 98            <section>
 99                <header><h4>CSS</h4></header>
100<pre class="sample">
101.image-container-invalid {
102    width: 100%;
103    height: auto;
104    /* height: 500px; The height of the parent element is not specified */
105}
106
107.image-container-invalid img {
108    object-fit: cover;
109}
110</pre>
111                <header><h4>HTML</h4></header>
112<pre>
113&lt;div class=&quot;background-image-invalid&quot;&gt;
114    &lt;img src=&quot;example.jpg&quot; alt=&quot;Example Image&quot;&gt;
115&lt;/div&gt;
116</pre>
117                <header><h4>HTML+CSS</h4></header>
118                <section class="sample-view">
119                    <div class="image-container-invalid">
120                        <img src="example.jpg" alt="Example Image">
121                    </div>
122                </section>
123            </section>
124        </article>
125        <article>
126            <h3>object-position</h3>
127            <section style="width: 100%; height: 200px;">
128                <header><h4>object-fit: cover; object-position: center;</h4></header>
129                <section class="sample-view" style="width: 100px; height: 100px;">
130                    <img class="object-position-center" src="example.jpg" alt="Example Image">
131                </section>
132                <header><h4>object-position: 50% 50%</h4></header>
133                <section class="sample-view" style="width: 100px; height: 100px;">
134                    <img class="object-position-50-50" src="example.jpg" alt="Example Image">
135                </section>
136                <header><h4>object-position: left top</h4></header>
137                <section class="sample-view" style="width: 100px; height: 100px;">
138                    <img class="object-position-left-top" src="example.jpg" alt="Example Image">
139                </section>
140                <header><h4>object-position: right 50%</h4></header>
141                <section class="sample-view" style="width: 100px; height: 100px;">
142                    <img class="object-position-right-50" src="example.jpg" alt="Example Image">
143                </section>
144                <header><h4>object-fit: cover; object-position: bottom right;</h4></header>
145                <section class="sample-view" style="width: 100px; height: 100px;">
146                    <img class="object-position-bottom-right" src="example.jpg" alt="Example Image">
147                </section>
148                <header><h4>object-fit: contain; object-position: top;</h4></header>
149                <section class="sample-view" style="width: 100px; height: 100px;">
150                    <img class="object-position-top" src="example.jpg" alt="Example Image">
151                </section>
152                <header><h4>object-fit: cover; object-position: 25% 75%;</h4></header>
153                <section class="sample-view" style="width: 100px; height: 100px;">
154                    <img class="object-position-25-75" src="example.jpg" alt="Example Image">
155                </section>
156                <header><h4>object-fit: cover; object-position: center top;</h4></header>
157                <section class="sample-view" style="width: 100px; height: 100px;">
158                    <img class="object-position-center-top" src="example.jpg" alt="Example Image">
159                </section>
160            </section>
161        </article>
162    </main>
163</body>
164</html>

객체 맞춤 관련

`object-fit` 속성

CSS object-fit 속성은 주로 이미지, 비디오 및 기타 콘텐츠가 컨테이너 요소 내에 맞는 방식을 제어하는 데 사용됩니다. 이 속성을 사용하면 지정된 요소를 유연하게 크기를 조정하고 미적으로 배치하는 방법을 설정할 수 있습니다. 이미지나 비디오가 부모 요소 안에 맞지 않을 경우 자르거나 크기를 조정하여 디스플레이를 조정하는 데 매우 유용합니다.

`object-fit` 값들

`fill` (기본값)

1img {
2  object-fit: fill;
3}

fill은 기본값으로, 이미지나 비디오가 부모 요소의 너비와 높이에 완전히 맞추기 위해 강제로 늘어납니다. 이 경우 원래 비율은 무시되며 이미지가 왜곡될 수 있습니다.

부모 요소의 크기에 완벽히 맞춥니다.
비율이 무시되기 때문에 이미지나 비디오가 세로 또는 가로로 늘어날 수 있습니다.

`contain`

1img {
2  object-fit: contain;
3}

contain은 비율을 유지하면서 부모 요소 내에 콘텐츠가 완전히 맞도록 크기를 조정합니다. 부모 요소의 크기를 초과하지 않으며, 세로 또는 가로 방향에 여백이 생길 수 있습니다.

전체 콘텐츠가 표시됩니다.
원래 비율을 유지하기 위해 패딩(레터박스 또는 필러박스 효과)이 나타날 수 있습니다.

`cover`

1img {
2  object-fit: cover;
3}

cover는 비율을 유지하면서 콘텐츠가 부모 요소를 완전히 덮도록 크기를 조정합니다. 부모 요소에 맞추기 위해 일부 콘텐츠가 잘릴 수 있으나, 전체 콘텐츠가 컨테이너를 채워 빈 공간이 발생하지 않습니다.

콘텐츠가 부모 요소를 완전히 덮습니다.
원본 가로세로 비율을 유지하면서 잘릴 수 있습니다.
주로 배경 이미지나 히어로 섹션 이미지에 사용됩니다.

`none`

1img {
2  object-fit: none;
3}

none은 이미지나 비디오를 원래 크기와 가로세로 비율로 표시합니다. 부모 요소의 크기에 맞게 조정되지 않으며, 필요하면 콘텐츠가 넘칩니다.

콘텐츠의 원래 크기가 유지됩니다.
콘텐츠를 부모 요소에 맞게 조정하지 않습니다.

`scale-down`

1img {
2  object-fit: scale-down;
3}

scale-down은 none과 contain 동작을 결합한 값입니다. 콘텐츠가 부모 요소에 맞으면 none처럼 동작하지만, 콘텐츠가 너무 크면 contain 동작을 적용하여 크기를 줄여 맞춥니다.

콘텐츠가 부모 요소보다 크면 크기가 축소됩니다.
콘텐츠가 더 작으면 원래 크기로 표시됩니다.

사용 예시

배경 이미지를 부모 요소에 맞추기

예를 들어, 반응형 디자인을 염두에 두고 이미지를 화면 전체에 표시하려면 cover를 사용하는 것이 일반적입니다. 다음 코드는 이미지가 잘리더라도 부모 요소에 딱 맞게 조정하는 예제입니다.

 1<div class="background-image">
 2  <img src="example.jpg" alt="Example Image">
 3</div>
 4
 5<style>
 6.background-image img {
 7  width: 100%;
 8  height: 100%;
 9  object-fit: cover;
10}
11</style>

이 경우, 이미지는 부모 요소를 완전히 덮으며, 어떤 화면 크기에서도 아름다운 레이아웃을 유지합니다. 가로세로 비율이 다를 경우 이미지 일부가 보이지 않을 수 있지만, 디자인에 적합한 프레젠테이션을 구현합니다.

가로세로 비율을 유지하면서 이미지 표시

다음으로, 이미지의 가로세로 비율을 유지하면서 전체 이미지를 부모 요소에 맞추려면 contain이 적합합니다.

 1<div class="image-container">
 2  <img src="example.jpg" alt="Example Image">
 3</div>
 4
 5<style>
 6.image-container img {
 7  width: 100%;
 8  height: 100%;
 9  object-fit: contain;
10}
11</style>

이 예제에서는 이미지가 컨테이너에 맞도록 축소되어 약간의 여백이 생기지만, 원본 이미지가 왜곡 없이 표시됩니다.

일반적인 실수

object-fit을 사용할 때 일반적으로 발생하는 실수는 부모 요소의 크기를 설정하지 않는 것입니다. object-fit은 콘텐츠를 부모 요소에 맞추는 속성이므로, 부모 요소의 크기가 명확하지 않으면 기대한 효과를 얻을 수 없습니다. 부모 요소에 width나 height가 적절히 설정되어 있는지 확인하십시오.

예를 들어, 아래 코드에서 부모 요소의 높이가 지정되지 않아 object-fit이 의도한 대로 동작하지 않습니다.

 1<div class="image-container">
 2  <img src="example.jpg" alt="Example Image">
 3</div>
 4
 5<style>
 6.image-container {
 7  width: 100%;
 8  /* height: 500px; the parent element's height is not specified */
 9}
10
11.image-container img {
12  object-fit: cover;
13}
14</style>

이 경우, 부모 요소의 높이를 지정하거나 flexbox나 grid 레이아웃을 사용하여 전체 레이아웃을 조정해야 합니다.

`object-fit`을 사용해야 하는 상황

object-fit은 특히 다양한 화면 크기에 맞춘 반응형 디자인과 웹사이트에서 중요합니다. 예를 들어, 다음과 같은 경우에 유용합니다:.

이미지나 비디오를 다양한 기기에서 올바르게 표시하려는 경우
배경 이미지와 같은 것을 전체 화면으로 표시하되 잘림을 허용하려는 경우
이미지의 비율을 유지한 채 부모 요소에 맞추려는 경우
갤러리와 같은 곳에서 이미지 크기를 일관되게 표시하려는 경우

이러한 상황에서 object-fit을 사용하면 디자인 일관성을 유지하고 사용자 경험을 향상시킬 수 있습니다.

요약

object-fit은 웹 페이지에서 이미지 및 비디오가 부모 요소와의 상대적 위치에서 어떻게 표시되는지를 유연하게 제어할 수 있게 해주는 강력한 CSS 속성입니다. fill, contain, cover, none, scale-down과 같은 다양한 값을 사용하여 다양한 디자인 요구 사항을 충족할 수 있습니다. 이를 올바르게 이해하고 적절히 적용하면 시각적으로 매력적인 레이아웃을 만들 수 있습니다.

object-fit 사용을 숙달하여 반응형이고 미적으로 아름다운 디자인을 만들어보세요.

`object-position` 속성

CSS object-position 속성은 이미지나 비디오 같은 컨텐츠를 요소 내에서의 위치를 제어하는 데 사용됩니다. object-position을 사용하면 컨텐츠를 특정 지점에 배치하여 레이아웃에 맞는 시각적 효과를 제공할 수 있습니다.

`object-position` 개요

object-position은 주로 <img> 태그와 <video> 태그와 같은 미디어 요소에 적용됩니다. 이 속성은 미디어가 컨테이너 내에서 표시되는 위치를 제어합니다. object-fit은 종종 object-position과 함께 사용되며, object-fit은 이미지나 비디오가 프레임 크기에 맞는 방식을 설정하고, object-position은 콘텐츠의 표시 위치를 조정합니다.

1img {
2    object-fit: cover;
3    object-position: center;
4}

이 예제에서는 이미지가 컨테이너에 맞게 조정되고(object-fit: cover), 중앙이 표시되도록 위치가 설정됩니다(object-position: center).

값 지정 방법

object-position은 다음 두 값으로 지정됩니다.

수평 위치 (X축)
수직 위치 (Y축)

값 지정 형식

object-position에서 다음 형식으로 값을 지정할 수 있습니다.

키워드: top, right, bottom, left, center
백분율: 0%에서 100%까지
길이 단위: px, em, rem 등

예를 들어, 다음과 같이 사용할 수 있습니다.

1img {
2    object-position: 50% 50%; /* Center the image */
3}
4
5video {
6    object-position: left top; /* Align to the top left */
7}

키워드와 백분율의 조합

키워드와 백분율을 혼합하여 사용하는 것도 가능합니다.

1img {
2    object-position: right 50%;
3}

이 예제에서는 이미지를 오른쪽 끝에 배치하고 수직적으로 50% 가운데에 정렬시킵니다. 이 조합은 유연한 위치 조정이 필요할 때 매우 유용합니다.

`object-fit`과의 조합

object-position은 보통 object-fit과 함께 사용됩니다. object-fit은 이미지나 비디오가 프레임에 따라 어떻게 크기가 조정되는지를 결정합니다. 예를 들어, object-fit: cover를 사용하면 이미지를 프레임에 맞게 잘라내고 지정된 object-position에 따라 배치합니다.

1img {
2    object-fit: cover;
3    object-position: bottom right;
4}

이 예제에서는 이미지가 전체 컨테이너에 걸쳐 확장되며, 콘텐츠의 오른쪽 하단 부분을 표시합니다.

`object-fit` 값과 결합된 예제

fill: 이미지가 왜곡될 수 있지만 전체 컨테이너에 맞게 표시됩니다.
contain: 비율을 유지하면서 전체 이미지가 표시됩니다.
cover: 컨테이너에 맞게 잘리며, 비율은 유지됩니다.
none: 이미지가 원래 크기로 표시됩니다.

1img {
2    object-fit: contain;
3    object-position: top;
4}

이 설정에서는 이미지를 컨테이너 맨 위에 배치하고 전체 이미지를 표시합니다.

고급 사용법

object-position은 단순한 위치 조정뿐만 아니라 시각적 효과를 향상시키는 다양한 상황에서 사용할 수 있습니다.

이미지의 일부 강조

전체 이미지를 표시하는 대신 이미지의 특정 부분에 초점을 맞추고 싶을 때 유용합니다. object-fit을 cover로 설정하고 object-position을 사용하여 특정 영역에 초점을 맞춥니다.

1img {
2    object-fit: cover;
3    object-position: 25% 75%;
4}

이 예제에서는 이미지의 왼쪽 하단 부분을 표시하여 중요한 부분을 강조합니다.

비디오를 배경으로 사용할 때

비디오를 배경으로 사용할 때 object-position이 유용하게 사용됩니다. 페이지 디자인의 일관성을 유지하기 위해 비디오를 특정 위치에 배치할 수 있습니다.

1video {
2    object-fit: cover;
3    object-position: center top;
4}

이 설정에서는 비디오가 전체 페이지에 맞게 조정되고 상단 중앙에 배치됩니다.

자주 발생하는 문제와 해결 방법

object-position을 사용할 때 몇 가지 문제가 발생할 수 있습니다. 여기에서는 일반적인 문제와 그 해결 방법을 소개합니다.

이미지의 일부가 잘립니다

object-fit: cover를 사용할 경우, 이미지는 컨테이너에 맞추기 위해 잘릴 수 있습니다. 이 경우, object-position으로 표시 위치를 조정하여 중요한 부분이 표시되도록 할 수 있습니다.

1img {
2    object-fit: cover;
3    object-position: center;
4}

이미지 위치가 예상과 다릅니다

퍼센트 지정이 항상 직관적이지는 않을 수 있습니다. 컨테이너의 크기와 비율을 고려하고 다양한 값을 실험해보는 것이 필요합니다. 개발자 도구를 사용하여 실시간으로 조정하는 것이 효과적입니다.

요약

object-position은 미디어 요소의 위치를 자유롭게 설정할 수 있는 강력한 도구입니다. object-fit과 결합하여 디자인에 맞는 유연한 레이아웃을 구현할 수 있습니다. 다양한 상황에서 시각적 효과를 극대화하기 위해 키워드, 퍼센트, 길이 단위를 숙지하십시오.

위의 기사를 보면서 Visual Studio Code를 사용해 우리 유튜브 채널에서 함께 따라할 수 있습니다. 유튜브 채널도 확인해 주세요.

YouTube Video

`overflow` 및 `contain` 속성

`object-fit` 및 `object-position` 속성

YouTube Video

미리보기를 위한 HTML

객체 맞춤 관련

object-fit 속성

object-fit 값들

fill (기본값)

contain

cover

none

scale-down

사용 예시

배경 이미지를 부모 요소에 맞추기

가로세로 비율을 유지하면서 이미지 표시

일반적인 실수

object-fit을 사용해야 하는 상황

요약

object-position 속성

object-position 개요

값 지정 방법

값 지정 형식

키워드와 백분율의 조합

object-fit과의 조합

object-fit 값과 결합된 예제

고급 사용법

이미지의 일부 강조

비디오를 배경으로 사용할 때

자주 발생하는 문제와 해결 방법

이미지의 일부가 잘립니다

이미지 위치가 예상과 다릅니다

요약

YouTube Video

`object-fit` 속성

`object-fit` 값들

`fill` (기본값)

`contain`

`cover`

`none`

`scale-down`

`object-fit`을 사용해야 하는 상황

`object-position` 속성

`object-position` 개요

`object-fit`과의 조합

`object-fit` 값과 결합된 예제