[CSS] object-fit 컨테이너에 맞게 이미지 크기 조정하기

 

 

 

 

HTML 작업을 하다 보면 이미지의 크기가 내 생각과 다르게 뒤죽박죽 해상도도 엉망으로 나오는 경우가 많습니다.

이럴 때 object-fit을 사용하여 이미지의 크기와 비율을 조절하여 내가 원하는 크기로 이미지를 깔끔하게 출력할 수 있습니다.

이 글에서는 object-fit에 대한 설명과 간단한 예제를 통해 object-fit의 사용방법에 대해 알아보도록 하겠습니다.

 

---

 

 

반응형

 

 

object-fit이란 무엇일까?

 

css의 object-fit 속성은 컨테이너에 맞게 <img>나 <video>등의 크기를 조정할 때 사용하는 속성입니다.

object-fit의 속성을 활용하여 종횡비를 유지하거나 공간에 딱 맞게 이미지를 늘려서 차지하는 등등 여러 가지 일을 할 수 있습니다.

 

 

obfect-fit의 속성 값

 

• fill: 기본값입니다. 주어진 치수를 채우도록 이미지 크기가 조정됩니다. 필요한 경우 이미지가 크기에 맞게 늘어나거나 찌그러집니다.
• contain: 이미지는 종횡비를 유지하지만 주어진 크기에 맞게 크기가 조정됩니다.
• cover: 이미지는 종횡비를 유지하고 주어진 치수를 채웁니다. 이미지는 크기에 맞게 잘립니다.
• none: 이미지 크기를 조정하지 않습니다.
• scale-down: 이미지가 가장 작은 버전 none 또는 contain

 

 

object-fit 예제

 

 

간단한 예제를 통해서 object-fit을 사용해 보겠습니다.

 

object-fit 예제 이미지

 

 

캐릭터 이미지를 한번 사용해 보겠습니다.

이미지의 원본 크기는 420x558입니다.

박스크기는 500x400입니다.

 

 

img {
    width:420px;
    height: 250px;
}

 

 

이미지의 크기가 가로는 적당한 것 같은데 세로가 너무 길게 나오고 있어 사용자들이 보기 좋지 않습니다.

높이를 250px로 줄여 보겠습니다.

 

높이를 줄인 이미지

 

 

높이를 줄이니 가로와 세로의 길이 비율이 맞지 않아 이상하게 보이는 것을 알 수 있습니다.

옆으로 늘어나 버려서 보기에 좀 이상해진 걸 확인할 수 있습니다. (종횡비 손상)

 

 

object-fit: cover

 

img {
    width:420px;
    height: 250px;
    object-fit: cover;
}

 

 

cover 속성값을 사용하여 이미지의 종횡비를 유지하고,

가로와 세로크기에 맞게 이미지를 채우며 넘어간 이미지는 잘리게 만들어 보겠습니다.

 

cover 속성값을 적용한 이미지

 

 

결과는 위의 이미지와 같이 나옵니다.

종횡비를 손상시키지 않고 가로와 세로의 크기를 맞추니 위와 아래쪽에 튀어나가는 이미지들이 생겨서,

그 이미지들은 자동으로 잘려서 나오게 됩니다.

 

cover 속성은 종횡비가 유지되기 때문에 브라우저의 크기가 변해도 이미지는 깨지지 않고,

그 비율을 그대로 유지합니다.

 

 

object-fit: contain

 

img {
    width:420px;
    height: 250px;
    object-fit: contain;
}

 

 

다음은 contain 속성값을 사용해 보겠습니다.

 

contain 속성을 적용한 이미지

 

 

contain 속성은 가로세로 비율을 유지하며 주어진 값에 맞게 크기가 조정됩니다.

즉, 지금 이미지는 원래의 비율보다 세로의 크기가 작게 설정이 되었습니다.

가로 세로 비율을 맞추기 위해서는 가로의 길이를 조금 더 줄여야 되기 때문에,

가로의 크기가 좀 더 줄어들었고, 전체적인 이미지의 크기도 줄어들었습니다.

 

728x90

 

 

object-fit: fill

 

img {
    width:420px;
    height: 250px;
    object-fit: fill;
}

 

 

fill은 이미지의 기본 값으로 표기해 주는 속성입니다.

 

fill 속성을 적용한 이미지

 

 

 

결과는 처음에 이미지 크기를 지정했을 때와 마찬가지로 변합니다.

 

object-fit: scale-down;

 

img {
    width:420px;
    height: 250px;
    object-fit: scale-down;
}

 

 

scale-down의 속성값을 사용할 경우 이미지의 스케일이 다운되어 축소됩니다.

 

scale-down 속성을 적용한 이미지

 

 

 

scale-down 속성을 적용하여 이미지의 크기가 줄어든 것을 확인할 수 있습니다.

 

 

---

 

결론

 

object-fit을 잘 활용하여 이미지를 박스에 맞게 유지시킬 수도 있고, 이미지의 비율을 깨트리지 않게도 할 수 있습니다.

이 글에서 다룬 내용을 토대로 반응형 웹페이지나 배경, 커버 이미지 등등 여러 가지로 활용할 수도 있을 것입니다.

이 글을 통해 object-fit의 내용을 조금 더 이해하고 활용할 수 있는 단계까지 나아가는데 도움이 되셨길 바랍니다.