이미지를 위한 object-fit, object-position

width, height 속성만으로 구현하려면 조금 번거롭습니다만 object-fit, object-position을 이용해 쉽게 구현할 수 있습니다.

 

 

position은 말 그대로 해당 이미지의 위치 조정입니다.

object-position: center center;

 

fit는 어떤 방식으로 이미지를 채울 것이나에 대한 속성입니다.

 

object-fit: cover;

 

object-fit: contain;

 

object-fit: fill;

 

 

보통 이미지를 줄 때 꽉 채우니까 width를 100%. height: 100%를 주고 cover로 덮으면 되겠죠

 

img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
}

 

 

참고한 글)

 

CSS로 유동적인 컨테이너 너비에 기반한 이미지 비율 유지, 가운데 정렬, 자르기

이미지의 가로세로비를 유지하면서 틀 안에 맞추려면 - Nothing New Under the Sun

HTML 이미지 비율 유지하고 틀에 맞추기 T