[CSS3] object-fit 속성 이해하기

object-fit 속성

 

object-fit 속성은 <img>, <video>, <object>, <svg> 요소와 같은 콘텐츠 크기를 어떤 방식으로 조절해 요소에 맞출 것인지 지정합니다.

 

-형식 구문-

fill

contain

cover

none

scale-down

 

[예제]

See the Pen object-fit by solutiona80 (@solutiona80) on CodePen.

 

 

 

예제를 보면

호두까기 인형을 (원본 사이즈 334 x 936) 사이즈가 큰 상태라서 비율에 맞게 줄였습니다.

 

image origin
- 원본 이미지로 비율에 맞게 영역을 잡아줬습니다.

object-fit : fill
- 대체되는 요소 컨텐츠의 내용이 지정된 너비와 높이에 따라 크기가 확대 혹은 축소, 늘어나거나 움츠러듭니다.
- 종횡비는 유지되지 않으며 대체로 너비와 높이에 맞게 요소 컨텐츠가 늘어납니다. (지정된 width, height에 맞게 그림이 늘려짐)

 

 

 

 

 

 

object-fit : contain
- 대체되는 컨텐츠의 가로세로 비율을 유지하며 요소의 컨텐츠 박스 내부에 들어가도록 크기를 맞춥니다.
- 가로세로 비율을 유지하며 지정된 width, height안에 최대한 확대시켜 크기를 맞춥니다.
- 가로세로 비율이 완전히 일치하는 경우가 아니면 가로나 세로 한 곳이 빈 상태로 보이게 됩니다.
- 예제에서는 height에 맞춘 상태라 좌, 우에 빈 공간이 생긴 상태입니다.

object-fit : cover
- object-fit : contain과는 조금 다르게 비율을 유지한 채로 가로와 세로에 빈 공간이 생기지 않게 최대한 가득 채울 때까지 확대됩니다.
- 예제에서는 object-fit : contain 이미지에서 좌, 우로 계속 확대하여 빈 공간을 제거한 상태까지 확대한 사진이라고 생각하시면 됩니다.

object-fit : none
- 대체 컨텐츠의 크기를 조절하지 않고 원본 크기에 가운데 정렬된 형태로 보여줍니다.
- 예제에서 설정된 width와 height에 이미지를 맞추는 게 아닌 이미지 원본 사이즈에서 이미지 가운데를 기준으로 width, height로 설정된 만큼만 보여줍니다.

object-fit : scale-down

- object-fit : contain처럼 원본 크기를 지정된 너비와 높이에 잘리지 않게 스케일을 줄여서 보여줍니다.

 

 

포스팅이 도움이 되셨다면 좋아요와 댓글 그리고 커피 한잔의 여유~ 감사합니다.