[CSS]이미지 사이즈 맞추기

전달받은 이미지는 왼쪽의 이미지처럼 위아래에 검은색 부분이 있습니다. 이 부분을 제외하고 위의 이미처럼 내용만 표시되게 하려면 어떻게 해야할까요.

 

방법은 object-fit이었습니다.

object-fit: img 도는 video를 컨테이너 크기에 맞게 리사이징하는 속성입니다.

• fill: 기본값, 주어진 너비에 맞게 늘리고 줄입니다
• contain: 주어진 너비에 맞게 리사이징하지만 주어진 비율을 유지합니다.
• cover: 주어진 비율을 유지하고 주어진 너비를 꽉 채웁니다.
• none: 리사이징하지 않습니다.
• scale-down: none 또는 contain의 가장 작은 버전으로 크기를 줄입니다.

그런데 height이 %이면 object-fit이 적용되지 않습니다.. 왜일까요.

 

 

 

height이 %이면 예상치 못한 동작이 발생한다.