티스토리 뷰

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/10   »
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
93,120
Today
132
Yesterday
166