CSS3 오브젝트 채우기, 위치조정 (object-fit, object-position) 속성

CSS를 이용하여 <img> 나 <video> 요소같은 오브젝트들을 비율을 유지한 채로 크기를 조정하는 것은 매우 까다로운 부분입니다. 오브젝트들이 출력될 공간이 유동적인 크기가 아닌 고정된 크기라면 더욱 골머리를 썩히게 됩니다. 이에 대응하는 CSS3 속성에 대하여 살펴봅니다.

object-fit 속성

object-fit 속성은 대체되는 요소의 내용(<img>, <video>, <object>, <svg> 등과 같은)이 지정된 너비와 높이에 맞게 장착되는 방식을 지정한다.

이는 프로필 이미지나 고정된 크기의 썸네일을 출력하는 다양한 경우처럼 제각각의 크기를 가진 오브젝트등을 넘겨받아 비율을 유지한 채로 일정한 크기로 재가공하는 경우에 유용하다고 할 수 있다. CSS3의 background-size 속성과 매우 유사하다.

object-fit 속성 값

속성값들의 변화를 살펴보기 위해 아래에서 이미지들을 사용하며 예제페이지를 따로 마련하고 있다.

img {
    width: 100px;
    height: 100px;
    object-fit: cover;   /* 아래에서 다룰 속성값 */
    border: 1px solid #000    /* 요소의 크기를 가늠하기위해 추가 */
}

• fill : 대체되는 요소의 내용이 지정된 너비와 높이에 따라 크기가 확대(scale up) 혹은 축소(down), 늘어나거나(stretch) 움츠러든다(shrunk). 요소를 가득 채울수 있는 크기로 변화되면서 종횡비는 유지되지 않는다. 이것은 일반적으로 이미지에 강제로 너비와 높이를 지정하는 것과 같다.

  

• contain : 내용이 종횡비를 유지하면서 요소에 정의된 너비와 높이안에서 가능한한 많이 확대(scale up)시킨다.

  

• cover : 내용이 종횡비를 유지하면서 정의된 너비와 높이를 가득 채울때까지 확대된다.

  

• none : 내용의 크기가 요소의 크기와는 상관없이 기본 알고리즘에 의해 조정된다. 이 알고리즘은 원본의 크기에 가운데 정렬된 형태를 띈다.

  

• scale-down : 내용의 크기를 아무것도 지정되지 않거나 혹은 contain 이 지정되어 있는 것처럼 변경한다. 이는 원본 크기보다 작아지는 결과를 보여준다.

  

object-fit 지원 현황

인터넷익스플로우	파이어폭스	사파리	크롬	오페라
미지원	지원	지원	지원	지원

안드로이드는 4.4버전부터 iOS는 8.4부터 지원한다.

IE의 최신버전인 Edge 버전에서도 아직 지원하지 않고 있기 때문에 크로스브라우징에 무리가 따른다. 관련하여 추천되는 폴리필 Polyfill for CSS object-fit property 이 있으나 버그가 해결되지 않은 듯 보인다.

object-position 속성

위에서 살펴본 object-fit 속성은 기본적으로 요소의 가운데로 화상을 이동시킨다. 이 위치를 원하는 값으로 변경하는 것이 object-position 속성이다.

object-position 속성 값

• 기본값은 50%, 50% 이다.
• 숫자형 px, em, % 등이 사용되며, 키워드 top, left, right, bottom이 사용될 수 있다.

object-position 지원 현황

인터넷익스플로우	파이어폭스	사파리	크롬	오페라
미지원	지원	미지원	지원	지원

안드로이드는 4.4버전부터 지원하며, iOS는 지원하지 않는다.