css如何保持div等高寬比
那麼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/,如需轉載,請註明出處,否則將追究法律責任。
相關文章
- 如何使用純CSS實現固定寬高比div?CSS
- CSS佈局 --- 等寬&等高佈局CSS
- CSS實現三列DIV等高佈局CSS
- 如何實現兩個div等高效果
- DIV+CSS相容解決DIV最大寬度和最小寬度問題CSS
- 如何用css實現"等高佈局"。CSS
- css如何實現未知寬高div中圖片垂直水平居中效果CSS
- 純css實現長寬等比例的divCSS
- CSS+DIV讓頁尾始終保持在頁面底部CSS
- CSS如何將div垂直居中CSS
- css為什麼設定div的寬度不起作用CSS
- css中圖片按照長寬比縮放CSS
- css如何實現div全屏效果CSS
- div+css 常用三種自動適應寬度分欄CSS
- CSS 左右兩列自適應等高CSS
- CSS如何實現div的透明效果CSS
- CSS如何設定div半透明效果CSS
- css實現高度height隨寬度width變化保持比例不變CSS
- 如何使用jQuery設定div的長度和寬度jQuery
- css兩列等高程式碼例項CSS
- css3實現一個寬高未知的div的slidedown動畫CSSS3IDE動畫
- jq如何改變css樣式寬度CSS
- CSS div居中CSS
- css如何讓div顯示在最上層CSS
- CSS如何讓文字居於div的底部CSS
- css 寬度與高度按百分比顯示,且寬高相等,span高度百分比CSS
- CSS 圖片固定長寬比實現高度自適應CSS
- 如何用css設定span元素的寬度CSS
- CSS div居中效果CSS
- div+css排版CSS
- div按鈕CSSCSS
- css盒模型以及如何計算盒子的寬度CSS模型
- css如何實現div中的文字垂直居中效果CSS
- CSS實現背景圖片固定寬高比自適應調整CSS
- css經典佈局系列二——等分等高佈局CSS
- CSS浮動一:divCSS
- DIV+CSS佈局CSS
- css+div分tabCSS