[CSS] 반응형 작업시 컨텐츠 비율 유지

반응형 작업시 컨텐츠 비율 유지

반응형으로 작업할때, 이미지나 유튜브 동영상 등 비율을 유지하며 가변적으로 크기가 조절되는 레이아웃을 제작할 경우가 있다. 이러한 경우에 사용하면 된다.

  <style>
    body, div{ margin:0; padding:0;}
    .div{ margin:0; padding:0; overflow:hidden; }
    .child1{ float:left; width:50%; height:0; padding-top:50%; background-color:red; }
    .child2{ float:right; width:50%; height:0; padding-top:50%; background-color:blue; }
</style>
  <div class="div">
    <div class="child1">왼쪽 비율 유지</div>
    <div class="child2">오른쪽 비율 유지</div>
  </div>
 

위와 같이 padding-top의 값을 width값과 동일하게 줄 경우는 1:1 비율로 유지되며, 비율은 여러가지가 있다.

컨텐츠 비율

2:1 비율 - padding-top값이 width값의 1/2배 

   <style>
    body, div{ margin:0; padding:0;}
    .div{ margin:0; padding:0; overflow:hidden; }
    .child1{ float:left; width:50%; height:0; padding-top:25%; background-color:red; }
    .child2{ float:right; width:50%; height:0; padding-top:25%; background-color:blue; }
</style>
  <div class="div">
    <div class="child1">왼쪽 비율 유지</div>
    <div class="child2">오른쪽 비율 유지</div>
  </div>
 

1:2 비율 - padding-top값이 width값의 2배 

   <style>
    body, div{ margin:0; padding:0;}
    .div{ margin:0; padding:0; overflow:hidden; }
    .child1{ float:left; width:50%; height:0; padding-top:100%; background-color:red; }
    .child2{ float:right; width:50%; height:0; padding-top:100%; background-color:blue; }
</style>
  <div class="div">
    <div class="child1">왼쪽 비율 유지</div>
    <div class="child2">오른쪽 비율 유지</div>
  </div>
 

4:3 비율 - padding-top값이 width값의 75%

   <style>
    body, div{ margin:0; padding:0;}
    .div{ margin:0; padding:0; overflow:hidden; }
    .child1{ float:left; width:50%; height:0; padding-top:37.5%; background-color:red; }
    .child2{ float:right; width:50%; height:0; padding-top:37.5%; background-color:blue; }
</style>
  <div class="div">
    <div class="child1">왼쪽 비율 유지</div>
    <div class="child2">오른쪽 비율 유지</div>
  </div>
 

16:9 비울 - padding-top 값이 width값의 56.25%

   <style>
    body, div{ margin:0; padding:0;}
    .div{ margin:0; padding:0; overflow:hidden; }
    .child1{ float:left; width:50%; height:0; padding-top:28.125%; background-color:red; }
    .child2{ float:right; width:50%; height:0; padding-top:28.125%; background-color:blue; }
</style>
  <div class="div">
    <div class="child1">왼쪽 비율 유지</div>
    <div class="child2">오른쪽 비율 유지</div>
  </div>