[CSS속성] 이미지 제어 : object-fit과 object-position

 

지난 글에서 스크롤 메커니즘이 있어도 배경 이미지를 고정시킬 수 있는 background-size와 attachment의 속성을 살펴봤다. 

background-size와 attachment : 페이지 스크롤 시 배경 이미지 고정

 

이번 글에서는 내가 원하는 사이즈의 박스 안에 이미지 컨텐츠를 배치하고자 할 때 필요한 CSS 속성인 object-fit, object-position에 대해 알아보고자 한다.

 

 

object-fit  : 이미지에 object-fit 지정

ㅡ Values (초기 값: fill) 

contain : 이미지(대체 컨텐츠)의 종횡비를 유지하면서 (요소 컨텐츠) 박스 내부에 들어가도록 크기를 맞춤 조절

cover : 이미지의 종횡비를 유지하면서 박스를 가득 채움. *종횡비가 일치하지 않으면 객체 일부가 잘림

fill : 박스 크기에 맞춰 이미지 크기를 조절하며 박스를 가득 채움. *종횡비가 일치하지 않으면 이미지가 늘어남

none : 이미지 크기를 조절하지 않음

scale-down : none과 contain 중 이미지의 크기가 더 작아지는 값에 따름

 

 

코드 및 적용 결과 

 

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

 

 

object-position : 이미지 컨텐츠 배치 (위치 지정)

ㅡ Values (초기 값: 50% 50%) 

<position>values

object-position: 50% 50%;

object-position: center top;

object-position: 100px 50px;

 

Global values

object-position: inherit;

object-position: initial;

object-position: unset;

 

 

코드 및 적용 결과

 

See the Pen object-position by hyoeun (@hyonixk) on CodePen.

 

 

 

---

참고 MDN, CSS-TRICKS