[CSS]object-fit 속성에 대하여

object-fit: fill;

 

대체되는 요소의 내용이 지정된 너비와 높이에 따라서 이미지가 확대 또는 축소되어 

요소를 가득채울 수 있는 크기로 변화되어서 적용된다. 

가로세로 비율이 유지되지 않는다.

 

object-fit: contain;

 

내용이 가로세로 비율을 유지하면서 요소의 크기에 맞게 확대 또는 축소된다. 

공백이 생길 수 있다.

 

object-fit: cover;

 

내용이 가로세로 비율을 유지하면서 요소의 크기에 맞게 확대 또는 축소된다.

공백이 생기지 않고 가능 채워진다.

 

object-fit: scale-down; 과 object-fit: none; 은 알아보지 않겠다.

 

한번 누르면 2시간동안 보이지 않아요 ㅎㅎ 이 포스팅은 쿠팡 파트너스 활동의 일환으로, 이에 따른 일정액의 수수료를 제공받습니다.

원치 않을 경우 를 눌러주세요