예전에는 웹에서 너비와 높이가 제한된 상황에서 이미지를 효과적으로 보여주는 것이 쉽지가 않았는데요. 그래서 이미지의 왜곡을 피하기 위해서 어쩔 수 없이 대신 배경 이미지를 사용해서 처리해야 하는 경우가 많았습니다.

하지만 다행히도 최근 몇 년 동안 CSS에서 이미지 요소를 다루는 방식이 상당히 개선되었습니다. 이번 포스팅에서는 이미지를 보여주는 방식을 결정하는 CSS의 object-fit 속성에 대해서 다양한 예제를 통해 최대한 쉽게 설명드리겠습니다.

📺 동영상: https://youtu.be/couap9KtFfU

📝 포스팅: https://www.daleseo.com/css-object-fit/

🧑‍💻 실습 코드:

• https://codepen.io/daleseo/pen/MWPzQgb

• https://codepen.io/daleseo/pen/oNaQvga

• https://codepen.io/daleseo/pen/VwEVyqd

• https://codepen.io/daleseo/pen/jOeQYXE

• https://codepen.io/daleseo/pen/rNqQpPj

• https://codepen.io/daleseo/pen/yLRQpZO