前端基礎學習-css如何保持div等高寬比
阿新 • • 發佈:2019-04-19
基礎 前端基礎 響應 absolut 通過 ack wrapper strong block 那麽css如何實現高度height隨寬度width變化保持比例不變呢?即給定可變寬度的元素,它將確保其高度以響應的方式保持成比例(即,其寬度與高度的比率保持恒定)。
下面以高寬 2:1 為例,通過2種方式來實現這種效果。
方式一:利用定位實現
.wrapper{ position : relative; background: #ccc; width: 10%; padding-bottom : 20%; } .inner{ position : absolute; top : 0; left : 0; right : 0; bottom : 0; } </style> <div class="wrapper"> <div class="inner"> 這是內容 </div> </div>
說明:其中奧妙就在於padding-bottom:20%, padding-bottom 是相對寬度的.也就是整個Wrapper的高度等於padding-bottom 的高度,Wrapper 沒有內容高度.沒有內容高度如何往其中放置我們準備的DIV呢?答案是 絕對定位, 所以Wrapper的樣式中有position:relative, 方便子元素相對Wrapper的左頂點定位.
方式二:利用偽元素
<style> .wrapper { background: #ccc; width: 10%; } .wrapper::before { content: ‘‘; padding-top: 200%; float: left; } .wrapper::after { content: ‘‘; display: block; clear: both; } </style> <div class="wrapper"> 這是內容 </div>
padding-top 在...上::before 偽元素使元素的高度等於其寬度的百分比。200% 因此表示元素的高度始終為200% 的寬度,創建一個響應正方形。 此方法還允許內容正常放置在元素內部。
總結
二種方式實現的效果都一樣,大家可以試一下,調整瀏覽器窗口的大小以查看元素的比例保持不變。
個人推薦使用方法二,這樣可以減少div的嵌套。不過方法一的兼容更好
前端基礎學習-css如何保持div等高寬比