[CSS] 반응형 비율 유지 박스(responsive box)

css를 활용하여 반응형에서 가로/세로 2:1 비율을 유지하는 박스 만들기

[html]

<h2>2:1 box</h2>

<div class="box1">

  box1: width 15%

</div>

<div class="box2">

  box1: width 20%

</div>

 

1. 패딩값(padding) 사용

[css]

.box1{

  width: 15%;

  background: yellowgreen;

}

.box1::after{

  content: "";

  display: block;

  padding-top: 50%; /* 예) 1:1 박스의 경우 100% 입력 */

}

 

2. aspect-ratio 사용

[css]

.box2{

  width: 20%;

  aspect-ratio: 2 / 1;

  background: skyblue;

}

 

See the Pen [CSS] responsive box ratio _ 반응형 박스 비율 유지 by Jinsik Son (@Jinsik-Son) on CodePen.