CSS 반응형 작업 시 박스 비율 유지하기

작업을 하다보면 리사이즈 됨에도 박스비율을 유지해야 하는 경우가 있다. (특히 반응형 작업에서)
박스의 width값은 100%로 지정하면 되지만 height값을 어떻게 해야 박스의 비율을 유지할 수 있을까?

---

max-width가 500px인 레이아웃안에 1.618:1 비율의 박스가 들어가야 한다고 가정해보자.
그리고 이 박스는 브라우저 사이즈가 작아져도 같은 비율을 유지해야 한다.

최초 박스 비율 세팅은 max-width 500px에 맞게 309px로 css에서 height값을 지정을 하여 1.618:1의 비율로 지정했지만 브라우저 resize시 width값은 계속 줄어들지만 height값은 309px로 고정값이기 때문에 그 비율은 유지할 수 없게된다.

<ul class="boxs">
    <li class="box">BOX 1 : 1.618</li>
</ul>

.boxs {max-width:500px;}
.boxs .box {width:100%; height:309px;} /* 1:1.618 */

javascript을 사용하면 이 비율을 유지시킬 수 있다. 
매 리사이즈시마다 박스의 width값을 받아와 비율에 맞게 계산을 하여 박스의 height값을 지정 해주는 방법이다.

//jQuery
$(window).resize(function(){
    var winWidth = $(window).width();
    var boxWidth = $('.box').width();
    //max-width값인 500px아래서만 작동
    if(winWidth <= 500){
    	//1.681:1
        $('.box').height(boxWidth*0.681);
    }
});

결과는 아래와 같다. (box의 height값이 매resize마다 바뀌는 것을 확인할 수 있다.

 

javascript에서 box 비율을 계산, 리사이즈 시 box height값을 지정하여 비율이 유지 된다.

 

---

제한적이긴 하지만, 단순히 박스크기만 비율에 맞추는 작업이라면 CSS로도 가능하다.

<ul class="boxs">
    <li class="box">BOX 1 : 1.618</li>
</ul>

.boxs {max-width:500px;}
.boxs .box {width:100%; height:0; padding-top:61.8%;} /* 1:1.618 */

박스의 height값을 0으로 지정하고 대신 padding-top값을 비율에 맞게 지정해주면 된다. 

(아래 캡쳐는 확인이 쉽도록 박스의 inline속성으로 padding-top값을 지정해놓은 상태이다.)

 

박스의 높이값의 변화 없이 비율유지가 가능하다.

앞서 말한 제한적이라는 의미는 박스의 padding을 사용하여 비율을 유지하기 때문에 박스 내에 콘텐츠를 삽입하면 콘텐츠가 박스높이 밖으로 밀리게 된다. 박스 내 콘텐츠를 위치하려면 절대값으로 (position) 콘텐츠를 배치해야 한다.

---

2019/09/04 - [JavaScript] - 스크롤 감지하여 고정메뉴 노출/비노출 처리 이벤트

스크롤 감지하여 고정메뉴 노출/비노출 처리 이벤트

2019/09/04 - [JavaScript] - 무한스크롤 (Infinity Scroll) UI 구현하기

무한스크롤 (Infinity Scroll) UI 구현하기

2019/09/03 - [UI 클론(Clone)] - 구글 로그인 인풋박스(Google Login Inputbox) UI Clone

구글 로그인 인풋박스(Google Login Inputbox) UI Clone

2019/08/28 - [JavaScript] - 강제로 body 스크롤막기 (PC, Mobile (iOS, Android..) 모든 환경)

강제로 body 스크롤막기 (PC, Mobile (iOS, Android..) 모든 환경)