CSS - Aspect Ratio Box (width 비율로 height 정의하기)

CSS 개발을 하다 보면 width에 대한 비율로 height 값을 정의할 필요가 있다.

이 경우 padding-top or padding-bottom을 사용하면 width에 대한 비율로 height를 정의할 수 있다.

 

예를 들어 padding-bottom: 56.25%를 선언하면, width의 56.25% 비율로 padding값이 선언된다. 

만약 width가 200px 라면 padding은 112.5로 결정된다.

공식 => 200 x 56.25 = 112.5

 

<div>
	<p>
	</p>
</div>

div {
  width: 200px;
  height: 200px;
  background: red;
}

p {
  padding-bottom: 56.25%;
  background: blue;
}