CSS3 object-fit, object-position

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

CSS를 이용하여 <img> 나 <video> 요소같은 오브젝트들을 비율을 유지한 채로 크기를 조정하는 것은 매우 까다로운 부분입니다. 

오브젝트들이 출력될 공간이 유동적인 크기가 아닌 고정된 크기라면 더욱 골치아파 질 것입니다. 

이에 대응하는 CSS3 속성에 대하여 알아봅니다.

object-fit 속성

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

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

CSS3의 background-size 속성과 매우 유사합니다.

css

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

object-fit 속성값

• fill : 대체되는 요소의 내용이 지정된 너비와 높이에 따라 크기가 확대(scale up) 혹은 축소(down), 늘어나거나(stretch) 움츠러든다(shrunk). 요소를 가득 채울수 있는 크기로 변화되면서 종횡비는 유지되지 않는다. 이것은 일반적으로 이미지에 강제로 너비와 높이를 지정하는 것과 같다.
• contain : 내용이 종횡비를 유지하면서 요소에 정의된 너비와 높이안에서 가능한한 많이 확대(scale up)시킨다.
• cover : 내용이 종횡비를 유지하면서 정의된 너비와 높이를 가득 채울때까지 확대된다.
• none : 내용의 크기가 요소의 크기와는 상관없이 기본 알고리즘에 의해 조정된다. 이 알고리즘은 원본의 크기에 가운데 정렬된 형태를 띈다.
• scale-down : 내용의 크기를 아무것도 지정되지 않거나 혹은 contain 이 지정되어 있는 것처럼 변경한다. 이는 원본 크기보다 작아지는 결과를 보여준다.

DEMO VIEW

속성값에 따른 데모 페이지 결과 캡처본

object-fit 지원 현황

IE	크롬	파이어폭스	사파리	오페라
미지원	지원	지원	지원	지원

• 안드로이드는 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 지원 현황

IE	크롬	파이어폭스	사파리	오페라
미지원	지원	지원	미지원	지원

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

[출처] WEBDIR - 흉내쟁이님

Jaehee's WebClub