CSS로 이미지를 영역 안에 배치하기 - object-fit / object-position

인터넷 익스플로러 호환성 이슈로 사용빈도가 낮은 속성 중에는 이미지나 요소를 정렬하고 배치하는 과정을 극단적으로 쉽게 해주는 속성들이 여러 개 있습니다.

그중 이미지나 비디오를 영역 안에 적절하게 정렬해서 배치하는 속성으로 "object-fit" 과 "object-position" 이 있습니다.

이미지와 비디오에 동일한 배치 속성이 적용되며, 이미지를 배치하는 방법으로 알아보겠습니다.

이미지를 영역 안에 배치하는 모든

배치 영역을 구분하기 쉽게 다음처럼 영역 안에 이미지(<img>) 1개만 배치합니다.

.wrap{
    width: 300px;
    height: 200px;
    border: 3px dashed #888;
    background-color: #f0f0f0;
}
.fitimg{
    background-color: #fff0f0;
    width: 100%;
    height: 100%;
}

사용하는 이미지는 1000x1000px 정사각형 이미지를 가로/세로 100%로 영역 안에 맞춘 것입니다.

CSS가 적용되면 다음처럼 이미지가 영역에 채워집니다.

"object-fit" 속성은 영역 안에 이미지를 100%로 채워야 적용되는 속성입니다. 사용할 때 주의해야 합니다.

object-fit 속성으로 영역 안에 이미지를 채우는 방법

배경 이미지를 설정하는 속성 중 "background-size" 와 비슷한 역할을 하는 속성이 "object-fit" 입니다.

300x200px 영역 크기에 1000x1000px 이미지를 채운 후 "object-fit" 속성으로 이미지를 채우는 방법을 선택하겠습니다.

"object-fit" 속성에서 사용할 수 있는 채우기 속성 값은 다음과 같습니다.

"object-fit" 속성은 객체(<img>, <video>) 태그에 적용하는 속성입니다. 영역에 적용하는 속성이 아닙니다.

속성 값	예	설명
fill		기본 값. 또는 "object-fit" 속성이 없을 때 이미지를 늘려 영역 전체를 채우며, 가로 세로 비율이 유지 되지 않습니다.
contain		가로/세로 비율을 유지한 채 이미지 크기를 조절해 영역 안에 전체 이미지가 보이도록 합니다. 영역 안에 전체 이미지가 보일 수 있는 최대 크기가 되며, 영역과 가로/세로 비율이 다른 경우 영역 배경이 보이게 됩니다.
cover		가로/세로 비율을 유지한 채 이미지 크기를 조절해 영역을 모두 채웁니다. 영역과 이미지의 가로/세로 비율이 다른 경우 가로, 또는 세로의 일부가 잘립니다. 영역에 빈 여백 없이 채우는 최소 크기가 됩니다.
none		이미지 크기 조절 없이 1:1 크기로 이미지를 영역에 표시합니다. 이미지는 가로/세로 가운데 정렬됩니다.
scale-down		"none" 과 "contain" 속성 값 결과 중 더 작은 이미지를 표시합니다. 이미지 가로/세로 모두 영역보다 작으면 "none" 이 적용되고, 일부라도 크면 "contain" 이 적용됩니다.

"scale-down" 속성 값의 이해

"scale-down" 속성 값은 조금 특이한 성격을 가지고 있습니다.

영역 크기보다 이미지 원본 크기가 가로/세로 모두 작으면 확대 없이 1:1 크기로 이미지를 표시("none" 속성)하며, 가로/세로 중 한쪽 방향이라도 영역보다 크면 영역 안에 이미지 전체가 표시되도록 이미지를 축소 표시("contain" 속성)합니다.

크기가 다양한 이미지를 목록으로 표시할 때, 아주 작은 이미지들이 늘어나 확대되면 보기 좋지 않아지는 문제를 피할 수 있는 장점이 있습니다.

"contain" 과 "cover" 속성 값과 기존 크기 조절 방법의 비교

CSS로 이미지를 영역 안에 크기를 맞춰서 배치하는 과정은 "object-fit" 속성을 사용하면 간편하지만 인터넷 익스플로러 호환성 등의 이유로 다른 CSS 속성으로 구현해야 할 경우 상당히 복잡한 구현 과정을 거쳐야 합니다.

"object-fit: contain;" 속성은 영역의 크기와 비율에 관계없이 이미지가 가운데 정렬되어 자동으로 채워집니다.

일반 CSS 속성으로 가로/세로 비율을 유지한 이미지를 영역 안에 맞춰 표시하려면 다음처럼 CSS 를 작성해야 합니다.

가운데 정렬을 하려면 영역에 "text-align: center;" 속성을 별도로 추가해야 합니다.

.wrap{
    width: 300px;
    height: 200px;
    border: 3px dashed #888;
    background-color: #f0f0f0;
    text-align: center;
    overflow: hidden;
}
.fitimg{
    background-color: #fff0f0;
    height: 100%;
}

영역 안에서 가로/세로 비율이 유지되도록 하려면 높이, 또는 너비 중 한가지는 자동(auto) 이어야 하기 때문에 높이 ,또는 너비 중 한가지만 "100%" 크기를 지정해야 합니다.

배치된 이미지는 다음처럼 보이게 됩니다. 

언뜻 "object-fit: contain;" 과 똑같아 보이지만, 앞서의 예들처럼 이미지에 지정한 연분홍 배경색이 아닌 영역의 배경색이 연회색 배경색으로 보이는 것에 주의해야 합니다.

"object-fit: contain;" 으로 영역에 이미지를 배치하면 이미지 크기 자체는 영역을 모두 차지하지만, 실제 비트맵 데이터는 가로/세로 비율이 유지된 채로 크기가 조절됩니다. 따라서 남는 공간에는 이미지 배경색이 보이게 됩니다.

반면, 이미지 높이를 "100%" 로 지정해서 가운데 정렬을 한 이미지는 실제 이미지 태그가 차지하는 영역이 비트맵 데이터와 일치하기 때문에 남는 공간은 영역의 배경이 보이게 됩니다.

CSS로 남는 공간의 배경색을 처리하거나, 배경 이미지를 붙이는 경우 영역에 CSS를 적용할지, 이미지에 CSS를 적용할지 명확하게 이해하고 적용해야 합니다.

그리고, 이렇게 일반 속성으로 이미지를 영역에 배치할 경우 세로로 더 긴 영역에 배치하면 다음처럼 전혀 원하지 않는 결과가 표시됩니다.

높이를 "100%" 로 설정하는 방법으로 이미지를 배치했기 때문에 정사각형 이미지의 남는 부분이 잘려나가는 것은 구조상 받아들여야 하겠지만, 잘려나가는 부분이 좌우가 맞지 않고 오른쪽 부분이 잘려나가기 때문에 이미지가 어색하게 보이게 됩니다.

이 문제를 해결하려면 다음처럼 추가 속성으로 이미지를 수평 가운데로 옮겨야 합니다.

이렇게 이미지를 가운데 정렬하면 영역의 "text-align: center;" 속성은 더 이상 필요하지 않습니다.

이렇게 작성된 CSS는 가로 여백이 남는 영역인 경우  "object-fit: contain;" 처럼 크기가 맞춰지며, 세로로 긴 영역인 경우 "object-fit: cover;" 처럼 크기가 맞춰지게 됩니다.

.wrap{
  width: 200px;
  height: 300px;
  border: 3px dashed #888;
  background-color: #f0f0f0;
  overflow: hidden;
  position: relative; /* 이미지 가운데 정렬을 위해 상대 위치로 고정 */
}
.fitimg{
  background-color: #fff0f0;
  height: 100%;
  position: absolute; /* 이미지 위치 조정을 위해 절대 위치로 변경 */
  left: 50%; /* 이미지를 영역 너비의 50% 만큼 오른쪽으로 이동 */
  transform: translateX(-50%); /* 이미지를 이미지 크기의 50% 만큼 왼쪽으로 이동 */
}

object-position 으로 여백 안의 비트맵 정렬 위치 정하기

"object-fit" 속성으로 영역에 이미지를 채웠을 때, 여백이 남는 경우 비트맵이 여백 남는 공간에 위치하는 정렬 속성을 추가로 부여할 수 있습니다.

"object-fit" 으로 이미지를 배치한 후 배트맵과 영역 사이에 여백이 있는 경우에만 적용되는 속성으로 단독으로는 사용할 수 없습니다.

또한, 여백이 없는 방향으로는 정렬 속성이 적용되지 않습니다.

"object-position" 에 사용 가능한 속성은 다음과 같습니다.

사용 가능한 값은 다음과 같습니다.

정렬 속성의 기본 값은 "center" 입니다. 수직, 수평 정렬 속성 값 중 지정되지 않은 방향은 "center"로 처리됩니다.

정렬 속성은 방향 속성 값 외에 "%"와 "px"를 사용할 수 있습니다.

"px" 값은 영역의 왼쪽 위 모서리를 기준으로 오른쪽 아래 방향으로 이동하는 픽셀 크기를 정합니다. 

"%" 값은 비트맵 좌우, 또는 상하의 여백 비율을 정합니다. 

100%는 비트맵 크기를 제외한 나머지 여백 공간 전체를 말합니다.

• "object-position: 50% 50%;" 로 지정하면 비트맵 왼쪽 위에 전체 여백의 50%를 배분하기 때문에 정 가운데 비트맵이 위치합니다. "object-position: center center;" 와 동일합니다.
• "object-position: 100% 100%;" 는 왼쪽 위에 모든 여백을 배치하기 때문에 비트맵이 오른쪽 하단 구석으로 이동합니다. "object-position: right bottom;"과 같습니다.
• % 값으로 정하는 여백 비율은 100%보다 큰 값을 사용할 수도 있습니다. 100%보다 크면 비트맵이 오른쪽 아래 방향으로 벗어나면서 보이지 않게 됩니다.