aspect-ratio

이미지 또는 특정 엘리먼트를 정해진 비율로 작게 보이거나 크게 보이게 하고 싶을 때 특히, 이미지가 img 태그가 아닌 background를 사용할 경우, 유용하게 사용됨.

 

padding-top 또는 padding-bottom을 이용하는 방법

container 요소에 적용된 width의 값을 기준으로 inner에 padding-top 또는 bottom을 지정해줌.

* 이 방법을 사용하기 위해서는 하나의 조건과 다른 하나의 엘리먼트가 필요함 (즉 아래 예제와 같이 container 요소와 하위 요소가 필요)

<div class="container">
  <div class="inner"></div>
</div>

 

예제

1:1 Aspect Ratio (height equal to width)

.container {
  background-color: red;
  width: 100%; 
}

.inner {
  padding-top: 100%; /* 1:1 aspect ratio */
}

calc() 사용

.container {
  background-color: red;
  width: 200px;
}

.inner {
  paddint-top: calc(200px * 0.3); /* 30% 적용 */
}

16:9 비율 적용

.inner {
  padding-top:calc(200px / 16*9); /* 고정 px 뿐 아니라 %도 입력 가능 */
}

 

inner 안에 텍스트 작성 (inner 태그 안에 text라는 클래스를 가진 하위요소를 추가)

.container {
  width: 200px;
}

.inner {
  padding-top: 50%;
  position: relative;
}

.text {
  position: absolute;
  topo:0;
  left:0;
}

 

알아두면 좋은 비율 예시

4:3  = (3 ÷ 4 = 0.75) = 75% (the universal video format of the 20th century)

16:9 = (9 ÷ 16 = 0.5625) = 56.25% (universal for HD television and European digital television, and default for Youtube video)

 

미디어쿼리에 활용할 경우, 설정된 비율에 따라 보여지는 ui를 개별 설정할 수 있음.

/* Minimum aspect ratio */
@media (min-aspect-ratio: 8/5) {
  div {
    background: #9af; /* blue */
  }
}

/* Maximum aspect ratio */
@media (max-aspect-ratio: 3/2) {
  div {
    background: #9ff;  /* cyan */
  }
}

/* Exact aspect ratio, put it at the bottom to avoid override*/
@media (aspect-ratio: 1/1) {
  div {
    background: #f9a; /* red */
  }
}

* 현재까지는 aspect-ratio : 16 / 9를 클래스 또는 태그의 값으로 적용할 경우, IE 와의 호환이 되지 않는다. (미디어쿼리의 조건으로는 사용 가능하므로 사용 시 유의할 것)