[CSS] aspect-ratio : 요소의 비율 유지하기

 

목적

반응형 요소를 만들 때 이미지(요소)의 비율을 그대로 유지하려고 한다.

비율은 16:9로 가정하였다.

 

방법

1. padding-bottom (or padding-top)

2. aspect-ratio

 

1. padding-bottom (or padding-top)

.wrapper {
	position: relative;
	width: 100%;
	height: 0;
	overflow: hidden;
	padding-bottom: 56.26%;
}

.content {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

 

 

 

- height를 0, padding-bottom 값을 %로 지정하여 너비에 따라 보여질 높이의 비율을 정할 수 있다.

- 요소의 안의 컨텐츠는 원래 padding에 밀려 있는데 position: absolute으로 고정시킨다.

 

padding-bottom: 세로비율/가로비율 * 100

ex  : 9/16*100 = 56.26

 

 

2. aspect-ratio

.wrapper {
 	width: 100%;
	aspect-ratio: 16 / 9;
}

.content {
	width: 100%;
	aspect-ratio: 16 / 9;
	object-fit: cover;
}

- aspect-ratio 속성을 이용하여 비율을 유지할 수 있다.

- 이미지의 경우 object-fit: cover; 를 이용하여 비율 유지

 

 

 

padding-bottom보다 aspect-ratio를 이용하면 의도를 더욱 명확하게 파악할 수 있다고 생각한다.