반응형에서 가로 세로 비율 고정하는 방법

 

 

 

반응형으로 퍼블리싱을 할 때 퍼센트를 활용해서 영역을 잡는데요.

가로 너비에 맞게 유동적으로 세로 높이 비율을 유지하는 방법을 공유해 보려고 합니다.

퍼센트로 세로값을 고정할 수 없기 때문에 패딩, 마진을 활용해서 만들 수 있습니다.

 

 

<style>
	#box-wrap {
		position: relative;
		width: 100%;
		height: 0;
		overflow: hidden;
		padding-bottom: 100%;}

	#box-wrap .box {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;}
</style>

위처럼 높이를 0으로 지정하고 padding-bottom을 퍼센트로 가로 세율 비율을 세팅해 줄 수가 있습니다.

가로 세로 1대1 정사각형으로 비율을 고정하고 싶다면 padding-bottom 값에 100%를 넣어주면 됩니다.