비율이 일정하게 유지되는 DIV BOX

viewport 크기가 변해도, 가로:세로 비율이 항상 일정하게 유지되는 box 를 만들어보겠습니다.
JS 필요없이 CSS 로만 구현 가능합니다.

HTML

<div class="box">
    <div class="content">1:1 비율</div>
</div>

CSS

.box {
    position: relative;
    width: 50%; /* 원하는 너비 */
}

.box:before {
    content: "";
    display: block;
    padding-top: 100%; /* 1:1 비율 */
}

.content {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
}

가로:세로 비율을 2:1 로 하고 싶다면, padding-top 을 50% 로, 1:2 로 하고 싶다면, 200% 로 선언하면 됩니다.

눈치채셨겠지만, padding-top = 세로 / 가로 * 100 입니다.

 

 

출처 : https://melomano.wordpress.com/2013/08/18/%EB%B9%84%EC%9C%A8%EC%9D%B4-%ED%95%AD%EC%83%81-%EC%9D%BC%EC%A0%95%ED%95%98%EA%B2%8C-%EC%9C%A0%EC%A7%80%EB%90%98%EB%8A%94-box/