DIV 가로 세로 비율을 일정하게 유지하기

화면 크기가 변해도 가로와 세로 비율이 일정하게 유지되는 DIV 를 만들수 있습니다.

JS 를 사용하지 않고 CSS 만으로도 가능합니다.

다음은 정사각형일 경우의 예제입니다.

HTML

1 2 3

<div class="proportion">     <div class="content">정사각형</div> </div>

CSS

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18

.proportion {     position: relative;     width: 50%; /* 원하는 가로크기 */ }  .proportion:before {     content: "";     display: block;     padding-top: 100%; /* 1:1 비율 */ }  .content {      position: absolute;     top: 0;     right: 0;     bottom: 0;     left: 0; }

padding-top 값에 따라 비율을 조절할 수도 있습니다.

가로:세로=1:1 비율은 100% 이고,

가로:세로=1:2 비율은 50% 입니다.

padding-top = 세로 / 가로 * 100

아래 링크에서 예제를 확인해 보실 수 있습니다.

https://jsfiddle.net/vv11Lwas/