[CSS] aspect-ratio 속성으로 object 비율 맞추기 (+크로스 브라우징)

Intro

가로세로 비율을 다룰 수 있는 aspect-ratio 속성은 매우 유용한 기능 중 하나입니다.

img, video, iframe, div 등 모든 태그에 사용가능합니다.

이 유용한 aspect-ratio 속성을 자세히 알아보려고 합니다.

---

사용방법

사용방법은 간단합니다.

.element {
  aspect-ratio: 16 / 9;
}

 

 

aspect-ratio 뒤에 원하는 비율을 적어주기만 하면 됩니다.

 

내가 원하는 비율을 element에 정의하고 내부 object에 object-fit: cover를 넣어주면

object가 비율에 맞게 꽉 차게 보여 줄 수 있습니다.

.element {
  aspect-ratio: 16/9;
  overflow: hidden;
}
.element img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

 

object-fit: cover에 대한 자세한 내용은 아래 게시물에서 확인할 수 있습니다.

[CSS] 이미지를 컨테이너에 맞게 사이즈 통일하는 방법 (object-fit, background ..)

아쉽게도 모든 브라우저에서 이 속성을 지원하지는 않습니다. (ex) IE

자세한 호환 가능 브라우저는 caniuse에서 확인할 수 있습니다.

---

+ 모든 브라우저 호환가능한 비율 적용방법

< HTML >

<div class="ratio ratio-16x9">
  <div class="object"></div>
</div>

< CSS >

.ratio {
    position: relative;
    width: 100%;
}
.ratio::before {
    display: block;
    padding-top: var(--bs-aspect-ratio);
    content: "";
}
.ratio > * {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
.ratio-1x1 {
  --tt-aspect-ratio: 100%;
}
.ratio-4x3 {
  --tt-aspect-ratio: 75%;
}
.ratio-3x4 {
  --tt-aspect-ratio: 132%;
}
.ratio-16x9 {
  --tt-aspect-ratio: 56.25%;
}
.ratio-9x16 {
  --tt-aspect-ratio: 156.25%;
}

ratio 컨테이너에 안에 ::before라는 가상 엘리먼트를 추가해 padding으로 빈 영역을 만들어주고,

ratio 내부의 object들은 전부 absolute로 띄워서 꽉 차게 배치시켜 줍니다.

비율은 ratio-1x1, ratio-4x3 등.. 더블 클래스를 추가해 정의할 수 있습니다.

 

* 자세한 내용은 bootstrap의 ratio helper 영역에서 확인할 수 있습니다.

Ratios