CSS等比列放大縮小效果

來源:互聯網
上載者:User

   這個效果要求是每個item元素的高度都是寬度的2倍,我們首先父元素box設定了寬度100%,這裡我們主要利用padding的一個屬性來解決問題,因為padding的寬度如果是百分數來計算的的話

  那麼它的實際值都是相對父元素的寬度來算百分數的值,包括 padding-bottom 和 padding-top 也是如此,所以我們這裡寬度可以設定為40%。由於我們這裡box的寬度是100%,而高度沒有告訴,所以不能直接設定高度值來取得效果,我可利用padding-bottom來代替height值,即如上所示,把height設為0,而把padding-bottom設為80%,這樣我們就可以看到效果了,你可以隨意拖放瀏覽器視窗大小,都是等比列縮小放大的哦這個也算是自適應螢幕的一個小方法吧》。。

  html代碼

 代碼如下  


<div class="box"> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> </div>

  css代碼

 代碼如下  

.item { width:40%; height:0; padding-bottom: 80%; background-color:#f00; float:left; margin:10px 5px;; }

相關文章

Beyond APAC's No.1 Cloud

19.6% IaaS Market Share in Asia Pacific - Gartner IT Service report, 2018

Learn more >

Apsara Conference 2019

The Rise of Data Intelligence, September 25th - 27th, Hangzhou, China

Learn more >

Alibaba Cloud Free Trial

Learn and experience the power of Alibaba Cloud with a free trial worth $300-1200 USD

Learn more >

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。