CSS의 object-fit 속성으로 이미지를 왜곡없이 보여주기
YouTube
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
다음 내용이 궁금하다면?
이미 회원이신가요?
2024년 2월 26일 오후 9:39
댓글 0
함께 읽은 게시물
📺'뤼튼'의 이상한 광고, 만든 사람에게 직접 의도를 들어봤습니다
이
... 더 보기
야근의 관성
제가 한국에서 직장 생활을 시작하고 가장 먼저 배운 것은 아이러니하게도 야근이었습니다. 신입이었던 제게 야근은 선택의 문제가 아니었거든요. 선배들에게 야근은 너무나 당연한 루틴이었고, 저녁 5시가 되면 "퇴근 안 해?"가 아니라 "저녁 뭐 먹을까?"라는 질문을 던졌습니다. 누가 정해놓은 것처럼 부장님이 퇴근해야 과장님이, 과장님이 퇴근해야 대리님이, 대리님이 퇴근해야 비로서 저 같은 신입도 퇴근 생각을 할 수 있었습니다.
... 더 보기⟪토스가 만든 리서치툴, TNS⟫
토
... 더 보기AI에게 코딩을 잘 시키려면 아주 정확하게 스펙을 줘야하는데(앞으로도 그럴 것), 스펙을 작성하는 것 보다 내가 코드를 쓰고 그걸로 스펙을 작성하라고 하는게 더 빠른게 문제..🫠
