纯css实现长宽等比例的div
现代网站页面基本都需要响应式，一个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>
代码中的vw是viewport的宽度，vh就是高度，这个始终是拿viewport计算的
看下面的效果图（1244X774）：
缩小浏览器宽高之后（653X774）：
这里主要利用了padding-bottom，这个熟悉的百分比是按照宽度来算的，相当于这个div的高度是0，通过padding-bottom，把div
撑开到我们想要的高度，然后里面再套一个div绝对定位，在套的div里面就可以填任何内容了。
