专栏首页全沾开发(huā)如何使用CSS绘制一个响应式的矩形

如何使用CSS绘制一个响应式的矩形

如何使用CSS绘制一个响应式的矩形

背景:

最近因为需要用到绘制类似九宫格的需求,所以研究了一下响应式矩形的实现方案。

有如下几种方案:

  1. 使用js来设置元素的高度
  2. 使用vw单位 div {width: 50vw; height: 50vw;}
  3. 使用伪元素设置padding的方式来实现正方形(也就是本次使用的方式)

实现一个正方形

.square {
  position: relative;
  width: 100%;

  &::before {
    content: '';
    display: block;
    padding-top: 100%;
  }
}
<div class="square"></div>

我们的做法就是使用伪元素的padding-top: 100%来撑开元素本身。

因为pading-toppadding-bottom百分比取值来自于元素的宽度,所以,设置值为100%就实现了我们想要的功能。

实现更多的功能

想要实现更多比例的形状,其实就是修改::before中的pading-top或者padding-bottom的值即可。

// 16: 9
.square::before {
  padding-top: (9 / 16 * 100%);
}

// 4: 3
.square::before {
  padding-top: (3 / 4 * 100%);
}

// 1: 2
.square::before {
  padding-top: 200%;
}

当然,上边的实现都只是一个简单的矩形,如果你的矩形里边还要有一些内容的话,需要给元素添加以下几个属性:

.content {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}
<div class="square">
  <div class="content">
    Awesome
  </div>
</div>

要注意的有以下几点:

  1. IE7-不支持
  2. 元素不要设置height以及overflow: hidden

参考资料

w3-padding

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • FlowType简易入门指北

    于是,我们就有了大佬们创造的FlowType,一个静态类型检查工具。 Flow可以在代码运行前对类型进行检查,包括:

    贾顺名
  • 项目结构——JavaScript版本的2048实现[0]

    项目地址:https://github.com/jiasm/2048 LiveDemo: http://jiasm.org/2048

    贾顺名
  • FlowType简易入门指北

    FlowType简易入门指北 写了一段时间JavaScript了,作为一个弱类型语言,无视类型判断在开发过程中带来了很多的好处,in...

    贾顺名
  • Bootstrap响应式前端框架笔记四——表单

        在Bootstrap框架中,可以为表单标签添加form-control属性来为其设置默认样式,默认表单控件的宽度将充满父容器标签。需要注意,在布局表单时...

    珲少
  • Bootstrap中水平排列的表单form-inline

    1 <html> 2 <head> 3 <title>初识Bootstrap</title> 4 <meta charset="utf-8"> 5 <...

    别先生
  • (1/2)Vue构建单页应用最佳实战

    1.我们将会使用webpack去为我们的模块打包,预处理,热加载。如果你对webpack不熟悉,它就是可以帮助我们把多个js文件打包为1个入口文件,并且可以达到...

    前端博客 : alili.tech
  • 左手用R右手Python系列——动态网页抓取与selenium驱动浏览器

    关于基础的网络数据抓取相关内容,本公众号已经做过很多次分享,特别是R语言的爬虫框架(RCurl+XML/httr+rvest[xml2+selectr])已经形...

    数据小磨坊
  • vue入门笔记

    Node.js 是一个基于 Chrome V8 引擎的 JavaScript 运行环境。

    Noneplus
  • 特斯拉再出致命事故:美国华裔音乐家驾车落水身亡

    新智元
  • CNN 卷积层输入Map大小计算

    对于输出的size计算: out_height=((input_height - filter_height + padding_top+padding_bo...

    郭耀华

扫码关注云+社区

领取腾讯云代金券