CSS3 오브젝트 채우기 - 위치조정(object-fit, object-position) 속성
CSS를 이용하여 <img> 나 <video> 요소같은 오브젝트들을 비율을 유지한 채로 크기를 조정하는 것은 매우 까다로운 부분입니다.
오브젝트들이 출력될 공간이 유동적인 크기가 아닌 고정된 크기라면 더욱 골치아파 질 것입니다.
이에 대응하는 CSS3 속성에 대하여 알아봅니다.
object-fit 속성
object-fit
속성은 대체되는 요소의 내용(<img>, <video>, <object>, <svg> 등과 같은)이 지정된 너비와 높이에 맞게 장착되는 방식을 지정합니다.
이는 프로필 이미지나 고정된 크기의 썸네일을 출력하는 다양한 경우처럼 제각각의 크기를 가진 오브젝트등을 넘겨받아 비율을 유지한 채로 일정한 크기로 재가공하는 경우에 유용할 수 있습니다.
CSS3의 background-size
속성과 매우 유사합니다.
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 이 지정되어 있는 것처럼 변경한다. 이는 원본 크기보다 작아지는 결과를 보여준다.
속성값에 따른 데모 페이지 결과 캡처본
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 - 흉내쟁이님
'StyleSheet > CSS' 카테고리의 다른 글
CSS를 이용한 Box 높이 동일하게 맞추는 방법 (0) | 2016.01.07 |
---|---|
CSS 유동적인 컨테이너 너비에 따른 이미지 비율 다루기 (1) | 2016.01.06 |
BEM(Block Element Modifier) 방법론 (5) | 2016.01.05 |
CSS Linebreak(줄바꿈) - white-space, word-wrap (0) | 2016.01.05 |
CSS3 : backface-visibility 속성(image flip 구현) (0) | 2016.01.04 |