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

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

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

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

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

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

 <!DOCTYPE html>

 <html>

 <body>

 <div class="contain">

     <div class="item">

         <div class="verticalCenter horizaCenter box">1</div>

     </div>

     <div class="item">

         <div class="verticalCenter horizaCenter box">2</div>

     </div>

     <div class="item">

         <div class="verticalCenter horizaCenter box">3</div>

     </div>

     <div class="item">

         <div class="verticalCenter horizaCenter box">4</div>

     </div>

     <div class="item">

         <div class="verticalCenter horizaCenter box">5</div>

     </div>

     <div class="item">

         <div class="verticalCenter horizaCenter box">6</div>

     </div>

     <div class="item">

         <div class="verticalCenter horizaCenter box">7</div>

     </div>

     <div class="item">

         <div class="verticalCenter horizaCenter box">8</div>

     </div>

     <div class="item">

         <div class="verticalCenter horizaCenter box">9</div>

     </div>

     <div class="item">

         <div class="verticalCenter horizaCenter box">10</div>

     </div>

     <div class="item">

         <div class="verticalCenter horizaCenter box">11</div>

     </div>

 </div>

 </body>

 </html>

 <style>

     html, body {

         margin: 0;

         padding: 0;

         width: 100%;

         height: 100%;

     }

     .contain {

         width: 50vw;/*屏幕宽度的一半*/

         height: 70vw;/*屏幕宽度的70%*/

         background: red;

     }

     .item {

         float: left;

         position: relative;

         background-color: darkslategrey;

         margin: 10px;

         /*这里显示的就是20:15=4:3,以后div就会保持这个比例*/

         width: 20%;

         padding-bottom: 15%;

     }

     /*垂直居中*/

     .verticalCenter{

         display: flex;

         align-items:center;

         height: 100%;

     }

     /*水平居中*/

     .horizaCenter{

         display: flex;

         justify-content:center;

         text-align: center;

         width: 100%;

     }

     .item .box{

         font-size: 1.5rem; width: 100%;height: 100%;background: blue;position: absolute;left: 0;top: 0;border: 1px solid yellow

     }

 </style>

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

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

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

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

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

纯css实现长宽等比例的div的更多相关文章

  1. 纯CSS实现点击事件展现隐藏div菜单列表/元素切换

    在写移动端导航的时候经常用到点击按钮出现/隐藏导航条的情况,最常见的方法当然还是前端框架直接调用,省心省力,不易出错:当然还有使用纯JS实现的小代码段.我这里整理了纯CSS实现方式,给需要的人和给自己 ...

  2. 追求极致--纯css制作三角、圆形按钮，兼容ie6

    参考了天猫.微博等网站的做法,用纯html和css实现,效果还是不错的.以下是成果,兼容主流浏览器,包括ie6. <!DOCTYPE html PUBLIC "-//W3C//DTD ...

  3. 超简单：纯CSS实现的进度条

    ——————纯CSS实现的进度条—————— HTML: <div class="wrapper"> <div class="bar"> ...

  4. [刘阳Java]_纯CSS代码实现内容过滤效果

    继续我们技术专题课,我们今天给大家带来的是一个比较酷炫的"纯CSS代码实现内容过滤效果",没有加入任何JS的效果.全部都是应用CSS3的新增选择器来实现的.先看效果截图 实现思路 ...

  5. css样式： 宽高按一定比例进行自适应

    纯 CSS 实现高度与宽度成比例的效果 最近在做一个产品列表页面,布局如右图所示.页面中有若干个 item,其中每个 item 都向左浮动,并包含在自适应浏览器窗口宽度的父元素中. item 元素的 ...

  6. div等比例缩放-------纯CSS实现自适应浏览器宽度的正方形

    摘自:https://blog.csdn.net/u010513603/article/details/78200207 1.方案一:CSS3 vw 单位 CSS3 中新增了一组相对于可视区域百分比的 ...

  7. 纯css竟可以做出边框这样长宽度的过渡效果

    边框效果如下:鼠标移到下面方形,就有效果   要是没有效果,点这个:https://murenziwei.github.io/testGit/Untitled1.html 正如你所看到的,这边框颜色只 ...

  8. 使用纯 CSS 实现 Google Photos 照片列表布局

    文章太长,因为介绍了如何一步一步进化到最后接近完美的效果的,不想读的同学可以直接跳到最后一个大标题之后看代码.demo及原理就好,或者也可以直接看下面这个链接的源代码. 不过还是建议顺序读下去,因为后 ...

  9. 纯CSS打造银色MacBook Air（完整版）

    上一篇:<selection伪元素小解> ::selection{ background:blue; color:red; }p{font-size:14px;} 作者主页:myvin 博 ...

随机推荐

  1. Jenkins远程测试

    Jenkins远程测试 网络测试,如,selenium 测试可以通过主从和 selenium 套件插件远程安装在机器上运行.下列步骤显示了如何运行使用此配置来进行远程测试. 第1步 - 确保主从配置到 ...

  2. java多线程之述解

    说起线程 就不得不提进程 他们之间的关系很紧密 进程:内存中运行的应用程序 每个进程都有自己的一块内存空间 而线程是进程中的一个执行单元 一个进程中可以有多个线程 多线程的好处就是可以并发操作程序 将 ...

  3. Python中remove,pop,del的区别

    先上题:写出最终打印的结果 a = [1, 2, 3, 4] for x in a: a.remove(x) print(a) print("=" * 20) b = [1, 2, ...

  4. JVM类加载全过程--图解

    JVM规范允许类加载器在预料某个类将要被使用时就预先加载它,下图为实例方法被调用时的JVM内存模型,1~7完整的描述了从类加载开始到方法执行前的预备过程,后面将对每一个步骤进行解释 在我们加载类的过程 ...

  5. python编辑修改haproxy配置文件--文件基础操作

    一.需求分析 有查询,删除,添加的功能 查询功能:查询则打印查询内容,如果不存在也要打印相应的信息 删除功能:查询到要删除内容则删除,打印信息. 添加功能:同上. 二.流程图 三.代码实现 本程序主要 ...

  6. Python-RabbitMQ(简单发送模型)

    RabbitMQ需要 erlang 和pika 1.RabbitMQ和erlang版本必须匹配,否则就报没有进程错误 2.RabbitMQ的erlang.cookie和windows下的erlang. ...

  7. Hyperledger Fabric CA User’s Guide——配置设置（四）

    配置设置 Fabric CA提供了三种方案去配置Fabric CA服务端和客户端,优先顺序是: CLI flags(标识) 环境变量 配置文件 在本文档的其余部分中,我们将对配置文件进行更改.但是,可 ...

  8. AES128加密算法完整实现

    概述 原本想把自己AES加密算法的整个实现过程给详细复述下来,分享给想学习的同学,也方便自己复习,但后来发现该工作量太大,加上作业太多没有过多的时间去写.所以就想把自己在学习的过程中多遇到的好的文章进 ...

  9. 记一次centos6升级salt-minion启动失败的问题

    记一次centos6升级salt-minion启动失败的问题 作者:耀耀 blog:https://www.liuyao.me 一.起因 升级Salt-minion后 使用/etc/init.d/sa ...

  10. Grunt 5分钟上手：合并+压缩前端代码

    Grunt 的各种优点这里就不扯了,对于 新手来说 合并(concat) + 压缩(uglify) 前端代码的需求量应该是最大的,这里以这俩种功能为主做一个5分钟的入门吧! 工作环境 $ node - ...