이미지 가운데 정렬 CSS (object-fit)

요약

fill : 요소의 틀에 맞춰서 늘리거나 줄인다 (확대o/비율x)

contain : 요소의 틀안에서 이미지 비율에 맞춰 표시한다(확대x/비율o)

cover : 요소의 틀을 가득채울때 까지 확대한다. 가운데정렬됨 (확대o/비율o)

이미지 가운데 정렬로 사용한 예제

// 이미지를 요소에 가득 채우며, 비율에 맞춰 가운데 확대한다

img {
    width: 100px; // or 100%
    height: 100px; // or 100%
    object-fit: cover;
}

참조

Object-fit