[신입10] 반응형에서 이미지 꽉 차게 비율 유지하기

사이트를 만들면서 브라우저의 사이즈에 따라 썸네일 이미지의 사이즈를 맞추기가 쉽지 않았다. 그렇다 해도 픽셀 단위로 이미지 사이즈를 조절하고 싶지는 않았다. 많은 공부와 시도 끝에 제일 좋은 방법을 찾아냈다. 지금껏 만들어낸 사이트에는 조금 미안하다(?).

📦 박스 가로·세로 비율 유지시키기

이건 진짜 꿀 같은 기술이다. 자식 요소가 꽉 차 있지 않은 박스는 세로 비율을 맞추기가 정말 어렵다. 특히 가로·세로가 유지되어야 할 때는 vw를 이용해 어거지로 맞추기도 했다.
하지만 이걸 사용하면 반응형에서도 박스의 가로·세로 비율을 유지시킬 수 있다. 나는 이 기술은 이미지 사이즈를 맞추는 방법의 토대로 사용할 것이다.

높이를 0으로 지정하고 padding-top이나 padding-bottom을 퍼센트로 지정하면 너비에 따라 가로세로 비율이 유지되는 박스를 만들 수 있다.

출처: 가로세로 비율을 유지하는 반응형 박스

.box {
  width: 30%;
  height: 0;
  padding-bottom: 30%;
}

🖼 이미지를 박스 사이즈에 맞추기

1. max-width:100%; height:auto;

이 방법은 제한적이다. 절반만 대응할 수 있다. 가로로 긴 사이즈의 경우 빈 곳이 생기기 때문이다. 반대로 width:auto; max-height:100%;로 하면 세로로 긴 사이즈에 대응할 수 없다.

.box img {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
}

2. object-fit:cover;

.box img {
  object-fit: cover;
  width: 100%; height: 100%;
}

정말 간단하지만, IE에서는 지원하지 않는다. IE에서는 사이즈가 조금 깨져도 괜찮거나 박스의 비율과 이미지의 비율이 항상 일정할 때 사용하면 될 것 같다. IC.. IE

3. background-size:cover;

썸네일을 php로 불러오다 보니 background로 불러오는 게 불가능한 줄 알았는데 오히려 php를 사용해서 background로 불러오는 게 쉬웠다.. 그동안 나는 무엇을 한 것인가.. background를 사용하지 않고 이미지 비율을 맞추는 다른 방법을 찾은 것이지..

<div style="background-image:url('/upload/...')" class="box"></div>

.box {
  background-size:cover;
  background-position:50%;
}

---

© 마침

앞으로 썸네일 넣는 게 쉬워질 걸 생각하니 가슴이 웅장해진다.

참고: CSS로 유동적인 컨테이너 너비에 기반한 이미지 비율 유지, 가운데 정렬, 자르기, [CSS] 이미지 사이즈 맞추기 (object-fit, absolute, background)