如何使用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 条评论
登录 后参与评论

相关文章

来自专栏yuezhongbao积累

移动端bug汇总(一)

Q: 当你点击一个链接或者通过Javascript定义的可点击元素的时候,它就会出现一个半透明的灰色背景。

416130
来自专栏小筱月

flex 布局

CSS3 为我们提供了一种可伸缩的灵活的 web 页面布局方式 flexbox 布局,它具有很强大的功能,可以很轻松实现很多复杂布局。可以简便、完整、响应式地实...

23420
来自专栏无原型不设计

[桌面版] 在 Mockplus 2.1 (预览版)中使用滚动区

1、添加一个滚动区。为方便查看,可以设置一个背景色 2、双击编辑滚动区 3、点击滚动条两端的按钮可以扩展或收缩滚动区中的内容。在两端按钮按下的同时,按...

28060
来自专栏www.96php.cn

[ecshop教程]怎样给ecshop商品图片添加水印

在ecshop商店设置——显示设置 1、选择水印图片 2、选择水印在图片中的位置 3、设置水印透明度。0为完全透明,100为完全不透明 ? 在商品管理...

38250
来自专栏24K纯开源

Qt Style Sheet实践(三):QCheckBox和QRadioButton

导读       单选按钮(QRadioButton)和复选框(QCheckBox)是界面设计中的重要元素。单选按钮只允许用户在一组选项中选择一个,且当其中一个...

1.1K60
来自专栏十月梦想

移动端开发样式初始化

在移动端开发,需要解决在移动端下的一些样式初始化,防止在设备出现不同的效果,下面我们看下,需要解决移动端的那些样式需要初始化!

12020
来自专栏姬小光

【第011期】如何区分页面上的图片和文字

在一个网页上,我们会看到有很多的图片,也有很多的文字。对于普通的用户,不需要去在意到底哪些是图片,哪些是文字。

14030
来自专栏机器学习从入门到成神

image的srcset属性

介绍 响应式页面中经常用到根据屏幕密度设置不同的图片。这个时候肯定会用到image标签的srcset属性。srcset属性用于设置不同屏幕密度下,imag...

21310
来自专栏林德熙的博客

win10 uwp 右击浮出窗在点击位置

如果需要让 Flyout 显示在指定的位置,那么请看本文。 本文主要让 MenuFlyout 出现在我们右击位置。

11110
来自专栏每日一篇技术文章

weex-16-image组件

DE2586BB-4A0A-4904-AA87-EF44A8A5BC74.png

10110

扫码关注云+社区

领取腾讯云代金券