반응형
기본 개념
기본 개념은 width 비율 만큼 padding-bottom 값을 동일하게 주면 된다.
100%를 주면 1:1 비율이 되는 것이고, 75% 값을 패딩으로 주면 4:3 비율이 되는 것이다.
See the Pen Height equal to dynamic width by zinee (@zineeworld) on CodePen.
응용 사례
See the Pen responsive youtube player by zinee (@zineeworld) on CodePen.
응용하여 쓴 사례로는 모바일 웹에서 유투브 임베디드 플레이어를 가로 폭에 맞춰 높이를 늘려줄 때 사용했다.
유튜브 플레이어 비율은 16:9 이기 때문에 padding-bottom: 56.25% 을 주면 된다.
비율을 빠르게 계산하기 위해서는 아래 웹 계산기를 사용하면 편리하다.
반응형
'개발일지 > CSS' 카테고리의 다른 글
[CSS] 특정 위치에서 가로폭에 상관없이 중앙 정렬하기 (0) | 2016.11.25 |
---|---|
[CSS] Country dropdown with flag (0) | 2016.11.23 |
[CSS] Fancy progress bar (0) | 2016.10.31 |
[CSS] Noise Effect (0) | 2016.08.09 |
[CSS] pure css - input range custom (1) | 2016.08.01 |