[CSS] 박스 비율을 유지하며 여러 비율의 이미지 담기

가로와 세로의 비율이 고정돼있는 박스에 이미지를 넣어야 할 경우, 이미지의 크기가 해당 비율로 고정돼있으면 문제가 없겠지만, 어떤 비율의 이미지가 들어올지 모를 경우에는 이미지가 튀어나오는 문제가 발생한다. 이를 해결하기 위한 가장 단순한 방법은 박스에 overflow: hidden 속성을 주는 것이다. 그럼 당연히 튀어나온 만큼의 이미지는 보이지 않게 된다. 하지만 이 방법은 여러 문제가 있다.

 

1. 튀어나온 부분을 숨기는 것이기 때문에 이미지가 잘릴 수밖에 없다. 심지어 잘린 뒤 보이는 부분은 중앙 부분이 아닌, 좌측 상단 부분이다.

2. 반응형을 고려하기 위해 width를 퍼센트로 둘 경우, width는 브라우저의 크기가 줄어들면 같이 줄어들지만, height는 그대로다. 즉, 박스의 가로 세로 비율을 유지하지 못한다.

 

See the Pen oRmWaP by WOOJE (@wjnoh) on CodePen.

 

이런 상황인 것이다. 하지만 우리가 원하는 건 다음과 같다.

 

1. 박스 내에 빈 공간이 생기더라도 이미지의 비율은 유지되거나, 잘리더라도 좌측 상단이 아닌 중앙 부분이 보여야 한다.

2. 브라우저의 크기가 줄어들더라도 박스의 비율은 그대로 유지돼야 한다.

 

마치 인스타그램 마이페이지에 있는 썸네일처럼 말이다.

 

박스의 크기가 정방형으로 고정돼있다. 브라우저를 줄여도 정방형은 유지된다.

실제 이미지는 어떤 비율의 이미지가 들어올지 모른다. 위 경우 가로가 긴 이미지지만 썸네일에서는 중앙 부분만 보여준다.

 

해결법은 다음과 같다.

 

See the Pen QRYdrq by WOOJE (@wjnoh) on CodePen.

 

1. thumbnail-wrapper는 width를 조절할 수 있는 박스다. 반응형으로 구성한다면 해당 값은 %가 될 것이다.

2. thumbnail은 padding-top을 가지는데, padding은 %로 값을 줄 경우, width의 크기에 비례하는 특성이 있다. 즉 padding-top이 100%면 width의 100%만큼 padding-top이 높아지는 것이다. thumbnail-wrapper에 따로 height를 주지 않았기 때문에, 전체 박스의 크기는 정방형이 된다. 만약 70%로 두면 4:3 비율이 될 것이다.

3. thunbnail-centered는 정방형이 된 박스에 이미지를 위치시키는 역할을 한다. position: absolute 속성과 translate 속성으로 위치를 잡아준다. 

4. thunbnail-img는 마찬가지로 translate로 위치를 잡아준다. 여기서 만약 max-width의 값을 100%로 두면 박스 내에 빈 공간이 남더라도 이미지의 비율은 그대로 유지된다. 해당 값이 없을 경우, 이미지는 중앙만을 보여준다. 이때 height 속성이 중요하다. height 속성은 최상위 박스(thunbnail-wrapper)의 높이가 돼야 한다. 이는 자바스크립트를 사용해 wrapper의 높이를 받아온 뒤 넣어주면 된다.