css如何保持div等高寬比

智雲程式設計發表於2019-01-03

那麼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的巢狀。不過方法一的相容更好

這裡推薦一下我的前端技術分享群:731771211,裡面都是學習前端的,如果你想製作酷炫的網頁,想學習程式設計。自己整理了一份2019最全面前端學習資料,從最基礎的HTML+CSS+JS【炫酷特效,遊戲,外掛封裝,設計模式】到移動端HTML5的專案實戰的學習資料都有整理,送給每一位前端小夥伴,有想學習web前端的,或是轉行,或是大學生,還有工作中想提升自己能力的,正在學習的小夥伴歡迎加入學習。

點選:


來自 “ ITPUB部落格 ” ,連結:http://blog.itpub.net/69901074/viewspace-2295501/,如需轉載,請註明出處,否則將追究法律責任。

相關文章