寬度是高度的兩倍(等比縮放)
實現思路: 以父級元素為基準, 子級 width:100%; (也就是父級寬度的100%), padding-top:50% (也就是父級寬度的50%,根據css規范, padding用百分比表示的話, padding: 100%等于父元素的寬度);
為什么不直接`width: 50%; height: 50%;?
那樣高度就成了父級高度的50% (不合題意,除非父級寬高相等);
原題目:
紅色部分寬高之比2:1
源碼:
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>寬高比例固定</title> <style> .father{ overflow: hidden; position: absolute; left: 10px; right: 10px; top: 50%; transform: translateY(-50%); background-color: #0c8ac5; } .son{ width: 100%; padding-top: 50%; background-color: #c03035; } span{ position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); font-size: 20px; color: #D8D8D8; } img{ float: left; margin-right: 10px; border: 2px solid #fdf6e3; } </style></head><body> <section class="father"> <div class="son"><span><img src="https://p2.ssl.cdn.btime.com/t0167d9ebac0d0e1828.jpg" alt="" width="200px"> 王也, 武當派弟子（現已離開武當），八奇技之一風后奇門的繼承人，靠占卜悟出天道，卻又作出甘于投身亂世的選擇。外表一副老好人的溫良相，謙謙有禮如溫吞水般，做事也經常是一副沒精打采，貌似沒睡醒的樣子。優哉游哉還脾氣軟，代表舉動經常是歉意笑著作出讓步。似乎對什么都無所謂，一副悠然道人之姿，但是在涉及到家人安危時毫不含糊，甚至為此做出過有失冷靜的舉動。不小心爆粗都會拜祖道歉的出家人，實力在后生一輩中甚至稱得上頭籌，暫時只有一次完全沒預料到地陰溝里翻船。</span></div> </section></body></html>以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持武林網。
新聞熱點
