[css] 반응형 시에도 이미지 비율 유지하기 (feat. object-fit:cover)

오늘은 정말 핵꿀팁을 공유하고자 합니다.
갤러리 게시판 많이 구현들 해보셨을겁니다. 그리고 이 갤러리 작업들을 하면서 썸네일때문에 난항을 겪으신 분들도 많으실거라고 생각합니다.

특히 유저가 권장 사이즈, 혹은 비율에 맞지 않는 올렸을때 따로 처리를 하지 않는다면, 아주 이색적인 레이아웃을 경험하실수 있을겁니다. 이미지 사이즈를 px로 고정해놓자니, 이미지가 깨지고,,  고정하지 않자니, 제멋대로인 이미지 사이즈에 레이아웃이 울퉁불퉁해지고,,,

 

이런상황에서, 균일하고 아름다운 레이아웃과, 깨지지 않는 썸네일을 유지하기 위해 이미지를 어떻게 처리해야하는가...? 하는 고민 많이들 해보셨져..?

오늘은 이문제를 css 만으로 간단하게 해결할 수있는 저의 꿀팁을 공유하고자 합니다. 

---

방법은 어렵지 않습니다. height대신, padding-bottom , 그리고 이미지에는 object-fit:cover을 사용하신다면 아주 간단하게 이 문제를 해결할수 있습니다! 

 

대략적으로 img를 감싼 div에 height대신, padding-bottom을 넣어주어서 비율을 잡아주고

overflow: hidden으로 넘치는 영역을 자르며,

그 안에 img는 position: absolute와 object-fit:cover을 사용해, 그 비율대로만 노출되게 처리하는 방식입니다. 

 

자세한 설명은 하단 코드 내 주석을 달아놓았으니, 주석을 보시며 넣어보아요!

아래와같이 처리해주시면, 반응형시에도 js사용 없이 이미지 비율을 유지한 채 아름답게 줄어든답니다! 

 

See the Pen responsive thumnail rate by jang (@todak) on CodePen.