Author | 王平安 |
---|---|
pingan8787@qq.com | |
博 客 | www.pingan8787.com |
微 信 | pingan8787 |
每日文章 | https://0x9.me/KMrv3 |
本文首发于虾哔哔的Blog
概述
今天遇到一个很有趣的问题:如何实现一个宽度自适应,高度为宽度的一半的矩形。
经过搜索引擎的筛选和自己的反复试验,发现使用padding-bottom
是最完美的解决方案。
解决方案
首先我们要明白,padding和margin都是相对于父元素的宽度来计算的,我们可以利用这一属性来实现我们的需求。
代码如下:
1 | <div class="scale"></div> |
这其中的关键点就是height: 0;
和padding-bottom: 50%;
。
我们将元素的高度由padding
撑开,由于padding
是根据父元素宽度计算的,所以高度也就变成了相对父元素宽度,同时要将height
设置为 0,这是为了将元素高度完全交给padding
负责。
最后padding-bottom
的值设为width
的值一半,就可以实现高度是宽度的一半且自适应啦。
改进
光是这样写还是不够的,因为元素的height
为 0,导致该元素里面再有子元素的时候,就无法正常设置高度。所以我们需要用到position: absolute;
。
代码如下:
1 | <div class="scale"> |
继续改进
解决了子元素的问题,那么我们再来看看元素本身。由于我们一开始的需求是宽高比 2:1
,这种比较好实现,但是后来需求又想要 16:9
的宽高比,而且宽度不是 100%
,那这样计算 padding-bottom
的时候就很麻烦了。如何解决呢?
这时候我们需要在外层再套一个父元素,将宽度的控制交给这个父元素来做。
代码如下:
1 | <body> |
如此,就可以完美解决。