css를 사용하여 이미지 원하는 부분보여주기 : object-fit

다양한 사이즈의 이미지가 있는데, 특정 사이즈로 보여주고 싶을 경우 css로 조정할 수 있습니다.

실무를 하다 보면 이미지 비율을 1:1로 가이드했음에도 제각각 등록할 경우가 있습니다.

css로 이미지 영역이 틀어지지 않도록 요청 하는 경우가 많은데요. 이때 사용하면 좋은 css 속성이 있습니다.

바로 object-fit입니다.

 

object-fit

object-fit을 이용하여 <img>나 <video>의 사이즈를 정해진 크기에 맞추어 일부만 보여준다거나 비율에 맞게 줄여준다거나 등 옵션에 따라 이미지 크기를 조절할 수 있습니다.

익스플로러에서는 지원되지 않는 속성입니다만 이제는 지원이 종료되었죠. 사용해도 무방할듯합니다. 

 

object-fit의 속성은 다음과 같습니다.

 

 fill  - 기본값이며, 주어진 크기에 따라 화면에 이미지가 꽉 차게 조정됩니다. 비율이 맞지 않는다면 늘어나거나 혹은 찌그러질 수 있습니다.

 contain  - 기로세로 비율을 유지하면서 주어진 크기에 맞게 조정됩니다. 이미지가 다 보여집니다. 정해진 사이즈와 비율이 맞지 않다면 빈 공간이 남게 됩니다.

 cover  - 가로세로 비율을 유지하면서 주어진 크기에 꽉차게 보입니다. 비율이 맞지 않으면 이미지의 일부분만 꽉 차게 보입니다.

 none  - 원래의 이미지 사이즈를 유지합니다. 즉 크기는 조정되지 않고 원본사이즈입니다. 그리고 가운데로 정렬됩니다.

 scale-down  - none이나 contain 중에서 가장 작은 버전으로 사이즈가 조정됩니다.

See the Pen circle by woosohee (@venusy) on CodePen.

 

object-position

이미지 정렬이 중앙으로만 되어서 맘에 안 든다 하시면 object-position을 이용하여 콘텐츠의 정렬을 지정할 수 있습니다.

기본 정렬 속성은 center입니다. 정렬이 지정되지 않으면 center로 처리됩니다.

여백이 있는 경우에만 적용되는 속성입니다. 여백에 없다면 지정하여도 변화가 없습니다.

정렬 속성은 다음과 같습니다.

• 수평정렬 : left, center, right, px, %
• 수직정렬 : top, center, bottom, px, %

See the Pen object-position by woosohee (@venusy) on CodePen.