CSS의 object-fit 속성으로 이미지를 왜곡없이 보여주기

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


하지만 다행히도 최근 몇 년 동안 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

CSS의 object-fit 속성으로 이미지를 왜곡없이 보여주기

www.youtube.com

CSS의 object-fit 속성으로 이미지를 왜곡없이 보여주기

다음 내용이 궁금하다면?

또는

이미 회원이신가요?

2024년 2월 26일 오후 9:39

 • 

저장 6조회 3,091

댓글 0

함께 읽은 게시물

아마존 출신 엔지니어가 알려주는 이력서 작성 팁

... 더 보기

 • 

댓글 1 • 저장 64 • 조회 2,509


[Dev] 2025년에 놓쳐선 안 될 25가지 오픈소스 개발 도구

... 더 보기

25 top open-source tools for building web apps you can't afford to miss in 2025🎉 🚀

DEV Community

25 top open-source tools for building web apps you can't afford to miss in 2025🎉 🚀

 • 

저장 57 • 조회 2,775


개발자를 위한 유용한 11가지 웹사이트 모음

... 더 보기

Create Amazing Mockups

Shots

Create Amazing Mockups

 • 

저장 86 • 조회 2,613


2025 리액트 기술 스택

... 더 보기

(번역) 2025 리액트 기술 스택

ykss.netlify.app

(번역) 2025 리액트 기술 스택

 • 

저장 44 • 조회 2,352


좋은 에러 설계란? 에러 정의부터!

... 더 보기

- YouTube

youtu.be

 - YouTube

 • 

저장 26 • 조회 1,754