纯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>

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

纯css实现长宽等比例的div相关推荐

如何使用纯CSS实现固定宽高比div？
在很多场景下,我们都需要一个固定长宽比的div作为容器.直接使用js动态设置固然可行,但在页面大小变化时就不得不通过触发onresize事件来动态设置,十分不便.此文旨在于探讨使用纯CSS实现固定长宽 ...
网页（全屏）背景图实现方式（纯CSS向）
全屏背景的意思就是背景图占满整个浏览器视窗,在没有body其他内容的时候不出现滚动条.就算有滚动条的时候,背景也是固定的,不跟随滚动. 对于这类的全屏背景图片的实现,我们需要注意的是,有五种情况: 图 ...
纯CSS输入区域下划线
使用纯CSS实现文本输入的下划线,简洁有效,实现效果: 实现方式实现方式也很简单: background: linear-gradient(#999 1px, transparent 0) 0 -1 ...
前端图片压缩上传(纯js的质量压缩，非长宽压缩)
前端图片压缩上传(纯js的质量压缩,非长宽压缩) 此demo为大于1M对图片进行压缩上传若小于1M则原图上传,可以根据自己实际需求更改. demo源码如下: <!DOCTYPE html> ...
5.前端CSS之基本属性(长宽,字体,文体,背景图片,阴影,border画圆,display)
1.块儿标签长宽height,width块儿标签可以设置长宽,设置长宽后依然独占一行 h1-h6,p,div行内标签无法设置长宽写了也不会生效 i,u,s,b span2.字体样式:font-fa ...
不固定图片宽高瀑布流_类百度图片的固定高度横向瀑布流js方法及纯css实现的方法记录...
微信图片_20190117105118.png 纯css实现代码: Document div{ display: flex;/*显示模式设置为弹性盒子*/ flex-wrap: wrap;/*进行强制 ...
java图像处理002---JAVA图片压缩_图片缩放_图片按照比例缩放_图片指定长宽缩放_Java使用google开源工具Thumbnailator实现图片压缩
JAVA技术交流QQ群:170933152 前言作为靠谱的java服务端程序员,图片这个事情一直是个头疼的事情. 现在很多网站上,都有上传图片这个功能,而图片对于现在的很多手机来说,拍摄出来的都是高 ...
html自动平分宽度,HTML5使用纯CSS实现“按比例平分”整个垂直空间
HTML5使用纯CSS实现"按比例平分"整个垂直空间需求需要实现头部固定在"屏幕"上方+中部滚动+底部固定在"屏幕"下方的页面布局样式. ...
php相机图片的长宽比例,照片常用的长宽比介绍，裁剪照片原来还有这么多选择...
在拍摄照片的时候我们往往会在后期进行二次构图,在裁剪的时候有不同的相片长宽比供我们选择,不同的长宽比带给观众的感受也不一样.这里为大家介绍一下照片拍摄中常用到长宽比例. 3:2(6:4) 这张照片是用 ...

纯css实现长宽等比例的div

纯css实现长宽等比例的div相关推荐

最新文章

热门文章