CSS object-fit
CSS object-fit: 이미지와 비디오의 객체 맞춤 설정
object-fit 속성은 이미지, 비디오와 같은 미디어 요소가 컨테이너에 맞도록
크기를 조정하거나 잘림을 조정하는 데 사용됩니다. 이 속성은 미디어가 컨테이너보다 클 때 비율을 유지하거나 컨테이너에
맞추는 방식 등을 정의할 수 있어, 반응형 디자인에 특히 유용합니다.
1. object-fit 기본 개념
object-fit 속성은 이미지 또는 비디오가 그 부모 컨테이너 안에 어떻게 맞출지를 정의합니다. 주로 이미지가 컨테이너와
비율이 맞지 않을 때 유용하게 사용됩니다.
기본 구문
element {
object-fit: value;
}
- value: 미디어를 컨테이너에 맞추는 방법을 정의합니다.
2. object-fit의 주요 값
object-fit 속성은 여러 가지 값을 가질 수 있으며, 각 값에 따라 이미지나 비디오가 컨테이너에 어떻게 맞춰질지 결정됩니다.
1) fill (기본값)
- *
fill*은 미디어가 컨테이너를 완전히 채우도록 강제로 조정합니다. 이미지나 비디오가 컨테이너의 너비와 높이에 맞추어 늘어나거나 줄어들기 때문에, 비율이 맞지 않을 경우 이미지가 왜곡될 수 있습니다.
img {
object-fit: fill;
}
예시: fill 적용
<img src="image.jpg" alt="Image" style="width: 300px; height: 200px; object-fit: fill;">
이 예시는 이미지를 왜곡해서 컨테이너를 완전히 채우게 만듭니다.
2) contain
- *
contain*은 미디어의 비율을 유지하면서 컨테이너에 맞게 조정합니다. 이미지나 비디오가 컨테이너 안에 완전히 맞지만, 비율을 유지하기 때문에 남는 공간이 생길 수 있습니다.
img {
object-fit: contain;
}
예시: contain 적용
<img src="image.jpg" alt="Image" style="width: 300px; height: 200px; object-fit: contain;">
이 예시는 이미지가 비율을 유지하면서 컨테이너 안에 맞도록 축소되며, 남는 공간에는 빈 여백이 생길 수 있습니다.
3) cover
- *
cover*는 미디어가 비율을 유지하면서 컨테이너를 완전히 채우도록 조정합니다. 이때, 이미지나 비디오가 잘릴 수 있지만 컨테이너는 항상 꽉 찬 상태로 유지됩니다.
img {
object-fit: cover;
}
예시: cover 적용
<img src="image.jpg" alt="Image" style="width: 300px; height: 200px; object-fit: cover;">
이 예시는 이미지가 비율을 유지하며 컨테이너를 완전히 채우도록 확대되거나 축소되며, 일부 잘릴 수 있습니다.
4) none
- *
none*은 미디어의 원래 크기를 유지하며 컨테이너에 맞추지 않습니다. 이미지나 비디오가 잘리더라도 크기를 변형하지 않습니다.
img {
object-fit: none;
}
예시: none 적용
<img src="image.jpg" alt="Image" style="width: 300px; height: 200px; object-fit: none;">
이 예시는 이미지가 원래 크기를 유지하고, 컨테이너에 맞지 않는 부분은 잘립니다.
5) scale-down
- *
scale-down*은 **none*과contain중 더 작은 크기로 이미지를 조정합니다. 즉, 이미지를 원래 크기로 표시하되, 컨테이너가 작으면 축소하여 맞춥니다.
img {
object-fit: scale-down;
}
예시: scale-down 적용
<img src="image.jpg" alt="Image" style="width: 300px; height: 200px; object-fit: scale-down;">
이 예시는 이미지의 원래 크기가 컨테이너보다 크면 이미지가 축소되어 맞추고, 그렇지 않으면 원래 크기로 유지됩니다.
3. 실전 예시: 이미지 갤러리에서 object-fit 사용
이미지 갤러리나 미디어 콘텐츠에서 object-fit을 사용하여 이미지를 균일하게 표시하는 데 유용합니다.
예시: 갤러리에서 object-fit: cover 적용
<div class="gallery">
<img src="image1.jpg" alt="Image 1">
<img src="image2.jpg" alt="Image 2">
<img src="image3.jpg" alt="Image 3">
</div>
.gallery img {
width: 100%;
height: 200px;
object-fit: cover;
}
이 예시는 갤러리의 모든 이미지를 비율을 유지하면서 컨테이너를 완전히 채우도록 설정해, 화면이 꽉 차 보이게 만듭니다.
4. object-fit과 함께 사용할 수 있는 속성: object-position
object-position 속성은 미디어가 컨테이너 안에서 어디에 위치할지를 정의합니다. 기본값은
50% 50%(가운데 정렬)이며, 이를 변경하여 이미지의 위치를 조정할 수 있습니다.
예시: object-position을 사용해 이미지 위치 조정
img {
width: 300px;
height: 200px;
object-fit: cover;
object-position: top left; /* 이미지를 왼쪽 상단에 위치 */
}
이 코드는 이미지가 잘리는 경우 왼쪽 상단을 기준으로 배치됩니다. 이를 통해 이미지의 중요한 부분을 잘리지 않게 조정할 수 있습니다.
결론
object-fit 속성은 이미지나 비디오와 같은 미디어 요소가 컨테이너의 크기에
맞도록 조정할 때 매우 유용합니다. 이를 통해 비율을 유지하거나, 컨테이너를 완전히 채우거나, 이미지를
축소하는 등의 다양한 옵션을 선택할 수 있습니다. 반응형 웹 디자인에서 이미지의 왜곡을 방지하면서도 적절한 맞춤을 유지하는
데 매우 효과적입니다