반응형
-
[CSS] aspect-ratio : 요소의 비율 유지하기CSS 2022. 6. 1. 23:58
목적 반응형 요소를 만들 때 이미지(요소)의 비율을 그대로 유지하려고 한다. 비율은 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 값을 %로 지정하여 너비에 따라 보여질 높이의 비율을 정할 수 있다. - 요소의 ..