1.4.3 object-fit

약 4분

본문 듣기

읽기 설정

글자 크기

줄 간격

글꼴

1.4.3 object-fit

object-fit 속성은 이미지나 비디오와 같은 콘텐츠가 지정된 영역에 어떻게 들어갈지를 정의하는 CSS 속성입니다. 이 속성은 특히 반응형 웹 디자인에서 다양한 화면 크기에 맞게 콘텐츠를 배치할 때 유용합니다. object-fit을 이용하면 콘텐츠가 비율을 유지하면서도 설정한 공간에 최적화된 방식으로 보여질 수 있습니다. 예를 들어, 이미지를 잘라내거나 늘리지 않고도 지정된 박스에 맞출 수 있습니다.

사용 가능한 값

fill: 기본값. 요소는 지정된 높이와 너비를 가득 채우지만, 비율이 유지되지 않습니다.
contain: 요소의 비율을 유지하면서, 지정된 박스에 맞게 최대한으로 축소합니다. 공간이 남으면 비어 있는 부분이 생길 수 있습니다.
cover: 요소가 지정된 박스를 가득 채우도록 비율을 유지하면서 크기가 조정됩니다. 일부가 잘릴 수 있습니다.
none: 비율 또는 크기 조정보다 원본 크기를 유지합니다.
scale-down: none 또는 contain 중 작은 크기를 선택합니다.

예제

아래는 object-fit 속성을 사용하는 HTML과 CSS의 간단한 예제입니다. 이 예제에서는 이미지를 포함한 요소에 object-fit을 적용하여 각기 다른 값이 어떻게 나타나는 지를 보여줍니다.

코드 html

<div class="container">
    <div class="box">
        <img src="image.jpg" alt="Sample Image" class="fit-cover">
    </div>
    <div class="box">
        <img src="image.jpg" alt="Sample Image" class="fit-contain">
    </div>
</div>

<style>
.container {
    display: flex;
    gap: 20px;
}
.box {
    width: 300px;
    height: 200px;
    overflow: hidden;
}
img {
    width: 100%;
    height: 100%;
}
.fit-cover {
    object-fit: cover;
}
.fit-contain {
    object-fit: contain;
}
</style>

실습

위의 예제를 기반으로, object-fit을 사용한 이미지 박스를 3개 추가하여 각각의 속성을 fill, none, scale-down으로 설정해 보세요.
각 이미지에 대해 이미지를 변경하여 다양한 상황을 테스트하고, 각각의 배열에서 어떤 차이가 있는지 관찰해 보세요.

정리

object-fit 속성은 콘텐츠를 효율적으로 조절할 수 있는 강력한 도구입니다. 반응형 웹 디자인에서 다양한 화면에 맞춰 내용을 조정할 때 필수적으로 알아두어야 할 기능입니다. 따라서 반드시 다양한 값들을 실습해 보면서 응용해 보세요.

1.4.3 object-fit

1.4.3 object-fit

사용 가능한 값

예제

실습

정리

댓글 0