-
[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 값을 %로 지정하여 너비에 따라 보여질 높이의 비율을 정할 수 있다.
- 요소의 안의 컨텐츠는 원래 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를 이용하면 의도를 더욱 명확하게 파악할 수 있다고 생각한다.
반응형'CSS' 카테고리의 다른 글
[CSS] non-boolean attribute warning (0) 2022.09.04 [CSS] gradient transition 적용하기 (React) (0) 2022.07.26 [CSS] 자동 완성 시 input 배경색 변경 (0) 2022.07.15 [CSS] emotion 사용 시 :nth-child CSS selector 경고 (0) 2022.06.25 [CSS] 콘텐츠의 길이와 상관 없이 footer 하단 고정 (0) 2022.06.10