[css 속성] object-fit

1. object-fit 속성

object-fit은 대체 요소의 크기 결정 방식을 변경할 수 있어!

• object-fit은 대체 요소의 크기를 어떻게 결정한 것인지 선택할 수 있다.
• 여기서 대체요소란, 콘텐츠가 외부 리소스로 대체되는 요소를 말한다.
• 비대체요소들은 여는 태그, 닫는 태그 사이에 표시한 콘텐츠를 작성한다.

<p>작성할 콘텐츠를 여기에 적지요~</p>

 

• 그에 반해 대체요소는 표시할 콘텐츠를 속성(img요소의 경우 src속성)으로 추가해야 한다.
• 이러한 대체요소의 종류는 iframe, video, embed, img요소 등이 존재한다.

<img src="이미지 주소" />

• 대체요소는 object-fit 속성을 사용할 수 있으며, 속성값은 fill, contain, cover, none, scale-down이 있다.

 

(1) object-fit: fill

• 기본값으로, 비율에 상관없이 개체를 요소의 크기에 맞춘다.

See the Pen object-fit fill by KumJungMin (@kumjungmin) on CodePen.

 

(2) object-fit: contain

• 비율이 고정된 상태로, 개체를 요소의 너비, 높이에 가능한 맞춘다.

See the Pen object-fit contain by KumJungMin (@kumjungmin) on CodePen.

 

(3) object-fit: cover

• 비율은 유지하되, 개체를 잘라 요소의 너비, 높이에 맞춘다.

See the Pen object-fit cover by KumJungMin (@kumjungmin) on CodePen.

 

(4) object-fit: none

• 개체의 원본 사이즈를 유지한다.

See the Pen object-fit none by KumJungMin (@kumjungmin) on CodePen.

 

(5) object-fit: scale-down

• none, contain 결과 중 크기가 더 작은 결과를 따른다.

See the Pen object-fit scale-down by KumJungMin (@kumjungmin) on CodePen.