純css實現長寬等比例的div

流火行者發表於2017-03-06
CSS

現代網站頁面基本都需要響應式，一個div的長寬往往我們都設定為百分之多少，這個百分之是相對於父容器動態計算的

這樣在瀏覽器寬度變化之後，我們的元素也能自動更新長寬。例如：我們在頁面上擺了一個div，這個寬度設定為20%，

同時又要求div始終保持4：3的長寬比來顯示，因為這樣看上去可能美觀一點。很顯然，不能因為寬度是20%了，把高度

設定為15%，這是肯定錯誤的。通常想到的方法就是用js動態計算，但是在瀏覽器視窗動態變化的時候，必須在resize的時候

再次更新這個div的高度，這樣比較麻煩。

下面用例是用純CSS控制這個div的長寬比，不論瀏覽器怎麼變化，div實時也會變化，並保持比例不變

 1 <!DOCTYPE html>
 2 <html>
 3 <body>
 4 <div class="contain">
 5     <div class="item">
 6         <div class="verticalCenter horizaCenter box">1</div>
 7     </div>
 8     <div class="item">
 9         <div class="verticalCenter horizaCenter box">2</div>
10     </div>
11     <div class="item">
12         <div class="verticalCenter horizaCenter box">3</div>
13     </div>
14     <div class="item">
15         <div class="verticalCenter horizaCenter box">4</div>
16     </div>
17     <div class="item">
18         <div class="verticalCenter horizaCenter box">5</div>
19     </div>
20     <div class="item">
21         <div class="verticalCenter horizaCenter box">6</div>
22     </div>
23     <div class="item">
24         <div class="verticalCenter horizaCenter box">7</div>
25     </div>
26     <div class="item">
27         <div class="verticalCenter horizaCenter box">8</div>
28     </div>
29     <div class="item">
30         <div class="verticalCenter horizaCenter box">9</div>
31     </div>
32     <div class="item">
33         <div class="verticalCenter horizaCenter box">10</div>
34     </div>
35     <div class="item">
36         <div class="verticalCenter horizaCenter box">11</div>
37     </div>
38 </div>
39 </body>
40 </html>
41 <style>
42     html, body {
43         margin: 0;
44         padding: 0;
45         width: 100%;
46         height: 100%;
47     }
48     .contain {
49         width: 50vw;/*螢幕寬度的一半*/
50         height: 70vw;/*螢幕寬度的70%*/
51         background: red;
52     }
53     .item {
54         float: left;
55         position: relative;
56         background-color: darkslategrey;
57         margin: 10px;
58         /*這裡顯示的就是20:15=4:3,以後div就會保持這個比例*/
59         width: 20%;
60         padding-bottom: 15%;
61     }
62     /*垂直居中*/
63     .verticalCenter{
64         display: flex;
65         align-items:center;
66         height: 100%;
67     }
68     /*水平居中*/
69     .horizaCenter{
70         display: flex;
71         justify-content:center;
72         text-align: center;
73         width: 100%;
74     }
75     .item .box{
76         font-size: 1.5rem; width: 100%;height: 100%;background: blue;position: absolute;left: 0;top: 0;border: 1px solid yellow
77     }
78 </style>
View Code

 

程式碼中的vw是viewport的寬度，vh就是高度，這個始終是拿viewport計算的

看下面的效果圖（1244X774）：

縮小瀏覽器寬高之後（653X774）：

這裡主要利用了padding-bottom，這個熟悉的百分比是按照寬度來算的，相當於這個div的高度是0，通過padding-bottom，把div

撐開到我們想要的高度，然後裡面再套一個div絕對定位，在套的div裡面就可以填任何內容了。

 

相關文章