가로세로 비율 유지하는 반응형 박스

반응형 웹디자인에서는

.wrap {
	max-width: 100%;
    width: 100%;
}

를 활용하여 콘텐츠가 컨테이너의 너비에 맞게 유동적으로 변경되게 하는 기법을 많이 사용한다. 이 때 높이는 컨텐츠를 가지고 있는 높이를 따르게 된다. 글자라면 높이가 유동적으로 변해도 상관없지만 이미지나 동영상인 경우 좌우 폭에 따라 높이 비율이 유지되어야 한다.

 

퍼센트 값은 상위 요소의 값에 상대적이기 때문에 상위 요소의 높이를 지정할 수 없는 경우라면 퍼센트로 높이를 지정할 수 없다. 이 때 padding, margin을 이용해서 퍼센트값을 지정할 수 있다.

#wrapper {
	position: relative;
	width: 100%;
	height: 0;
	overflow: hidden;
	padding-bottom: 30%;
}
#wrapper .wrap {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

높이를 0으로 지정하고 padding-top or padding-bottom을 퍼센트로 지정하면 너비에 따라 가로세로 비율이 유지되는 박스를 만들 수 있다. 안의 콘텐츠는 패딩에 밀려 박스 밖의 위치하기 때문에 절대 위치로 위치를 잡아주면 화면에 나오게 된다.