纯CSS实现宽高相等(或者其他比例)

动态实现宽高相等以及其它比例,一般使用的是JS。这次介绍一种使用纯CSS实现的方法。

基础结构与样式:

12

<div class="box"></div>

1234

.box{width:100px;background-color:#ddd;}

1.宽:高 = 1:1

12345

.box:after{content:'';display:block;padding-top:100%;}

2.宽:高 = 1:2

12345

.box:after{content:'';display:block;padding-top:200%;}

3.宽:高 = 2:1

12345

.box:after{content:'';display:block;padding-top:50%;}

动态修改一下宽度,会发现高度会自动跟着变化,并保持相应比例。原理很简单:

首先看下padding的取值:

length: 长度表示法 percentage: 百分比表示法,padding百分比的计算是基于生成的框的包含块的宽度 auto: 自动

百分比的参考值是包含块的宽度,所以padding值的变化会随着宽度变化,其实颜色块的高度padding撑起来的。

原文发布于微信公众号 - 前端黑板报(FeHeiBanBao)

原文发表时间:2016-01-05

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

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏jojo的技术小屋

原 荐 CSS3 transform 引起z

作者:汪娇娇 时间:2017年9月5日 单纯的z-index,可以通过设置数值的大小来决定层级的高低,但一涉及transform,z-index就失效了,为什么...

33480
来自专栏coding for love

CSS入门13-单位详解

(注1:如果有问题欢迎留言探讨,一起学习!转载请注明出处,喜欢可以点个赞哦!) (注2:更多内容请查看我的目录。)

8820
来自专栏腾讯IVWEB团队的专栏

SVG 动画精髓(下)

线条动画 SVG 中的线条动画常常用作过渡屏(splash screen)中。例如:一些比较炫酷的 LOGO 和 炫酷的效果,大家有没有动心想学一学,看看自己到...

61600
来自专栏一个爱吃西瓜的程序员

用Python画一只丑丑的猪头

前两天在知乎上看到有人用Python的turtle库画了一只小猪佩奇,接着就有网友用turtle画了一只哆啦A梦,不得不说他们都是人才,画得有模有样的。知乎地址...

47720
来自专栏林德熙的博客

WPF 在image控件用鼠标拖拽出矩形

今天有小伙伴问我一个问题,在image控件用鼠标拖拽出矩形,本文告诉大家如何使用鼠标画出矩形

17410
来自专栏我和PYTHON有个约会

ionic中的$inoicModal

在ionic中,除了常规的弹窗【$ionicPopup】还提供了浮动窗口【$ionicPopover】

8420
来自专栏乐沙弥的世界

Oracle 常用性能视图一览表(10g)

--************************************* -- Oracle 常用性能视图一览表(10g) --************...

8920
来自专栏算法channel

Python-GUI|Label显示图片,Pack布局控件

01 Label显示图片 Label显示文本很简单,直接在构造中将text显示地赋值。 如果Label显示成图片,如何设置? PhotoImage构造出图片,...

58060
来自专栏WindCoder

20种常用的 Ps技术

一种简单的数码照片后期润饰 1 打开图片,执行色像/饱和度(-40)降低饱和度。 2 新建一图层,将图层模式改为柔光,用画笔工具将需要润饰的部分画几下,这里...

21110
来自专栏大数据挖掘DT机器学习

信息图制作教程案例

当大家看到很多好看的信息图的时候最喜欢问的两个问题是:用什么软件做的?怎么做的? 在工具选择上,使用Adobe Illustrator,制作过程大家...

42370

扫码关注云+社区

领取腾讯云代金券