1 2 3 4 5 6 L

Page Header > Subtitle

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

 

object-fit 속성

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

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

object-fit 속성 값



59b8d292d7695119237a7eab8a8345e7.jpg
 

 

CSS

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

 

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

 

b4fe1572c4de2d862dcb3b2f44617ae3.jpg
 

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

 

d7922b2ff9606c81e600d57302049569.jpg
 

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

 

51963e8bbe819b16a91e042b6d37f2bb.jpg
 

 

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

 

a88282326397c0ceb77cd3da6e4283eb.jpg
 

 

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

 

0e99da619f497e03b45978fb39397c48.jpg
 

 

 

object-fit 지원 현황

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

 

object-position 속성

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

object-position 속성 값

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

object-position 지원 현황

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

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

 

0
0
이 글을 페이스북으로 퍼가기 이 글을 트위터로 퍼가기 이 글을 카카오스토리로 퍼가기 이 글을 밴드로 퍼가기
captcha
자동등록방지 숫자입력

HTML/CSS

번호 제목 글쓴이 날짜 조회수
8 [CSS] nth-child (n번째 부터 n번째 까지 css적용) 미도어묵 11-24 881
7 유튜브 동영상 반응형으로 넣기 미도어묵 09-11 639
6 HTML5에서 다른 frame의 문서에 속한 객체 접근 방법 미도어묵 07-29 629
5 table등의 null 값에 특정값 삽입 css 미도어묵 12-29 304
4 CSS로 글자 자르기 - 한 줄, 여러 줄 관리자 05-22 317
3 CSS3 오브젝트 채우기, 위치조정 (object-fit, object-position) 속성 관리자 05-22 325
2 날짜와 시간 입력을 도와주는 데이트 피커 15가지 관리자 04-25 397
1 버튼디자인 및 오버효과를 간편하게 줄수있는 bttn.css 관리자 04-25 279