티스토리 뷰

See the Pen Height equal to dynamic width by zinee (@zineeworld) on CodePen.


기본 개념은 width 값 만큼 padding-bottom 값을 동일하게 주면 된다. 같게 주면 1:1 비율이 되는 것이고, 75% 값을 패딩으로 주면 4:3 비율이 되는 것이다. 응용하여 쓴 사례로는 모바일 웹에서 유투브 임베디드 플레이어를 가로 폭에 맞춰 높이를 늘려줄 때 사용했다. 유투브 비율에는 padding-bottom: 56.25% 을 적으면 된다. 

저작자 표시 비영리 변경 금지
신고
댓글
댓글쓰기 폼
«   2017/08   »
    1 2 3 4 5
6 7 8 9 10 11 12
13 14 15 16 17 18 19
20 21 22 23 24 25 26
27 28 29 30 31    
글 보관함
Total
85,676
Today
4
Yesterday
162