[ CSS ] 오브젝트 채우기, 위치조정 (object-fit, object-position), overflow 참고사항

overflow 안에 사진, 동영상 채울 때.

 

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

오브젝트들이 출력될 공간이 유동적인 크기가 아닌 고정된 크기라면 더욱 골머리를 썩히게 된다.

이에 대응하는 CSS3 속성에 대하여 살펴보자.

 

object-fit 속성

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

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

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

 

 

object-fit 속성 값

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

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

 

 

 

 

object-position 속성

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

 

 

object-position 속성 값

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

object-position 지원 현황

 

 

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

미지원

지원

미지원

지원

지원

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