[CSS] 다양한 스타일링에 이미지 크기(object-fit) 속성 모음

Doyeon0430 | 2023년 08월 23일

이번시간에는 이미지의 너비와 높이를 자유롭게 조절할 수 있는 CSS의 스타일 속성을 알아보겠습니다.

object-fit를 통해 이미지의 다양한 영역을 지정하고 크기를 나타낼 수 있습니다.

그럼 지금부터 4가지의 object-fit 값을 소개하겠습니다.

이미지 크기(object-fit) 속성 - fill
이미지 크기(object-fit) 속성 - contain
이미지 크기(object-fit) 속성 - cover
이미지 크기(object-fit) 속성 - none

1. 이미지 크기(object-fit) 속성 - fill

첫 번째 이미지 크기 속성은 이미지의 기본값을 나타내는 효과입니다.

object-fit에 fit 속성은 이미지의 비율은 무시한 채 가로와 세로 값에 따라 크기가 적용됩니다.

See the Pen <a href="https://codepen.io/doyeon-kim-the-animator/pen/yLGNpmX"> Untitled</a> by doyeon kim (<a href="https://codepen.io/doyeon-kim-the-animator">@doyeon-kim-the-animator</a>) on <a href="https://codepen.io">CodePen</a>.

2. 이미지 크기(object-fit) 속성 - contain

두 번째 이미지 크기 속성은 이미지의 비율은 유지되며 크기 조절만 해주는 효과입니다.

object-fit에 contain 속성은 이미지의 비율을 유지시키며 전체 영역이 들어가도록 적용됩니다.

See the Pen <a href="https://codepen.io/doyeon-kim-the-animator/pen/XWobZjY"> Untitled</a> by doyeon kim (<a href="https://codepen.io/doyeon-kim-the-animator">@doyeon-kim-the-animator</a>) on <a href="https://codepen.io">CodePen</a>.

3. 이미지 크기(object-fit) 속성 - cover

세 번째 이미지 크기 속성은 이미지를 완전히 덮는 효과입니다.

object-fit에 cover 속성은 이미지의 비율을 유지시키며 가로와 세로 값에 넘치는 부분은 잘라줍니다.

See the Pen <a href="https://codepen.io/doyeon-kim-the-animator/pen/RwEPQGw"> Untitled</a> by doyeon kim (<a href="https://codepen.io/doyeon-kim-the-animator">@doyeon-kim-the-animator</a>) on <a href="https://codepen.io">CodePen</a>.

4. 이미지 크기(object-fit) 속성 - none

네 번째 이미지 크기 속성은 이미지를 원래 크기로 유지시켜주는 효과입니다.

object-fit에 none 속성은 이미지를 원래 크기로 만들면서 가로와 세로 값에 넘치는 부분은 잘라줍니다.

See the Pen <a href="https://codepen.io/doyeon-kim-the-animator/pen/wvRayoz"> Untitled</a> by doyeon kim (<a href="https://codepen.io/doyeon-kim-the-animator">@doyeon-kim-the-animator</a>) on <a href="https://codepen.io">CodePen</a>.

글을 마치며 다양한 스타일링이 적용된 이미지 속성들을 알아봤습니다.

댓글이 없습니다.

간편 댓글 작성