특정 비율 유지하는 div 만들기 (padding 활용, IE11 호환)

CSS 모던 스펙 중 하나인 'aspect ratio'는 특정 엘리먼트의 비율을 특정 값으로 유지할 수 있게 해 줍니다. 다만 IE11 등 하위 버전의 브라우저에서는 사용할 수 없는 단점이 있습니다. 'padding'을 활용해 이와 비슷한 비율을 유지하는 기능을 구현할 수 있습니다. 이는 IE11 등의 하위 브라우저에서도 구현이 가능합니다. CSS 랜더링 방식을 일종의 해킹하여 구현한 이 방식은 하위 브라우저를 호환하기 위한 작업 외에도 필요한 경우 특정 비율을 유지하도록 하는 스타일을 구현하는 용도로 활용이 가능합니다.

비율 유지가 주로 많이 쓰이는 용도는 썸네일의 비율을 유지시키는 데에 사용됩니다. 이 때에는 또 하나의 모던 스펙 중 하나인 'object-fit'을 하위 브라우저 대응하여 구현하는 데에도 지금 소개할 'padding'을 활용한 비율 유지 테크닉이 활용될 수 있습니다.

Padding으로 비율 유지하는 박스모델 구현

원리는 간단합니다. 한 요소의 'height'을 0으로 하되, 'padding-bottom'에 줌으로써 일종 높이를 갖게 하는 것입니다. 이런 방식을 통해 만약 '16:9'의 비율을 유지하는 'div'를 구성하고 싶다면, 'width'를 '160px'로 지정하고, 'height'은 '0'으로 그리고 'padding-bottom'은 '90px'를 지정하는 것입니다.

특정 비율 유지 썸네일 구현하기 (object-fit 기능 유사)

모던 스펙으로 제공되는 'object-fit'은 'img' 태그를 통해 구현된 이미지의 위치와 크기를 조절할 수 있는 기능을 제공합니다. 아쉽게도 구형 브라우저에서는 이 기능을 활용할 수 없는데, 'padding'을 활용해 특정 비율을 유지하는 'container'를 구성하고, 그 내부에 이미지를 'absolute'로 띄운다면 그와 유사한 효과를 내는 스타일링이 가능합니다.

.image {
  width: 100%;
  height: 0;
  max-width: 400px; 
  padding-bottom: 400px; // 1:1
  overflow: hidden;
  background: blue;
  position: relative;

  > img {
    width: auto;
    position: absolute;
    height: 100%;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
  }

  &.image__second {
    max-width: 300px;
    padding-bottom: 600px; // 1:2
  }
}

참고자료

• https://css-tricks.com/aspect-ratio-boxes/