纯css实现长宽等比例的div

最新推荐文章于 2023-08-31 17:38:36 发布

weixin_34194551

最新推荐文章于 2023-08-31 17:38:36 发布

阅读量441

点赞数

原文链接：http://www.cnblogs.com/JimmyBright/p/6511052.html

版权

现代网站页面基本都需要响应式，一个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里面就可以填任何内容了。

转载于:https://www.cnblogs.com/JimmyBright/p/6511052.html

weixin_34194551

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
纯css实现长宽等比例的div

现代网站页面基本都需要响应式，一个div的长宽往往我们都设置为百分之多少，这个百分之是相对于父容器动态计算的这样在浏览器宽度变化之后，我们的元素也能自动更新长宽。例如：我们在页面上摆了一个div，这个宽度设置为20%，同时又要求div始终保持4：3的长宽比来显示，因为这样看上去可能美观一点。很显然，不能因为宽度是20%了，把高度设置为15%，这是肯定错误的。通常想到的方法就是用js动态...
复制链接

扫一扫