여러분들은 브라우저에 원하는 이미지를 보여주실 수 있나요? img 태그를 사용하면 되는건데 뭔 소리냐고요?
모든 분들이 이미지를 화면에 보여줄때 100% img 태그를 사용하실 겁니다.
여기서 질문 하나 더 드리겠습니다. img 태그를 사용하셔서 어떤 상황에서든 같은 비율을 유지하는 이미지를 보여주고 계시나요?

오늘은 이미지를 화면에 어떤 식으로 보여줄지의 css 속성인 object-fit 에 대해서 알아보고자 합니다.

object-fit 속성은 어떤 속성입니까?

이미지를 감싸고 있는 컨테이너 크기에 맞게 이미지 태그의 크기를 다루는 속성 입니다.

object-fit 속성 값

• fill : object-fit 속성의 기본 값 입니다. 말 그대로 컨테이너 전체를 이미지 본연의 크기는 고려하지 않고 꽉 채우게 됩니다. 그렇다보니 이미지가 늘어나거나 찌그러지게 되는 경우가 있습니다.

• contain : 이미지의 가로 세로 비율을 유지한 채로 최대한 컨테이너 크기에 맞춰서 크기가 조정 됩니다. 이미지와 컨테이너 간의 비율이 맞지 않는 공간은 공백이 생기게 됩니다.

• cover : 이미지의 비율을 그대로 유지하면서 컨테이너를 가득 채웁니다. 그렇기 때문에 이미지가 확대 된 것 같이 화면에 보입니다. 컨테이너를 벗어나는 이미지는 잘리게 보여집니다.

• none : 이미지 원본 사이즈가 그대로 보여집니다. 이미지가 컨테이너보다 크면 잘리고 작으면 공백이 생기면서 원본 사이즈 그대로 보여집니다.

• scale-down : 이미지의 원본 크기가 컨테이너보다 가로 세로 모두 작다면 이미지의 원본 크기를 보여주고 가로 세로 둘중에 하나라도 컨테이너 크기보다 크다면 contain 이 지정된것처럼 화면에 보여집니다.