純css實現長寬等比例的div

時間 2019-11-18

標籤 css 實現長寬比例 div 欄目 CSS 简体版

原文原文鏈接

現代網站頁面基本都須要響應式，一個div的長寬每每咱們都設置爲百分之多少，這個百分之是相對於父容器動態計算的html

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

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

設置爲15%，這是確定錯誤的。一般想到的方法就是用js動態計算，可是在瀏覽器窗口動態變化的時候，必須在resize的時候flex

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

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

 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>