纯css实现长宽等比例的div

曾经终败给现在 2021-10-26 12:26 339阅读 0赞

现代网站页面基本都需要响应式，一个div的长宽往往我们都设置为百分之多少，这个百分之是相对于父容器动态计算的

这样在浏览器宽度变化之后，我们的元素也能自动更新长宽。例如：我们在页面上摆了一个div，这个宽度设置为20%，

同时又要求div始终保持4：3的长宽比来显示，因为这样看上去可能美观一点。很显然，不能因为宽度是20%了，把高度

设置为15%，这是肯定错误的。通常想到的方法就是用js动态计算，但是在浏览器窗口动态变化的时候，必须在resize的时候

再次更新这个div的高度，这样比较麻烦。

下面用例是用纯CSS控制这个div的长宽比，不论浏览器怎么变化，div实时也会变化，并保持比例不变

![ContractedBlock.gif][] ![ExpandedBlockStart.gif][]

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>

代码中的vw是viewport的宽度，vh就是高度，这个始终是拿viewport计算的

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

![274393-20170306172511688-1805036132.jpg][]

缩小浏览器宽高之后（653X774）：

![274393-20170306172603875-318718910.jpg][]

这里主要利用了padding-bottom，这个熟悉的百分比是按照宽度来算的，相当于这个div的高度是0，通过padding-bottom，把div

撑开到我们想要的高度，然后里面再套一个div绝对定位，在套的div里面就可以填任何内容了。

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

[ContractedBlock.gif]: https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif
[ExpandedBlockStart.gif]: /images/20211026/a52087def01f4f3c877eb470a30bb38d.png
[274393-20170306172511688-1805036132.jpg]: /images/20211026/572a1415160547c4b8df7cf72c684077.png
[274393-20170306172603875-318718910.jpg]: /images/20211026/36250f8e91924c5eb56c9e70b666fd4d.png