具体的CSS代码如下:
1 2 3 4 5 6 7 8 9 10 11 12 13 |
|
通过通配符*
选择器,让其子元素的宽高和容器.aspectration
一样大小:
1 2 3 4 5 6 7 |
|
padding & calc()
这个方案采用的是padding
和calc()
配合在一起使用。其实原理和第一个方案是一样的。只不过在第一个方案中,我们每次都需要对padding
的值计算,如果使用calc()
可以通过浏览器直接计算出padding
的百分比值。
1 2 3 |
|
padding & CSS变量
对于变量而言,以前是其他计算器语言和CSS处理器的特性,不过值得特性的是,现在也是CSS的特性。接下来的这个方案也是基于padding
原理,只不过是借助于CSS变量特性,让前面的方案变得更为灵活一些。使用CSS的变量时,可以把HTML中data-ratio
去掉了。换成style="--aspect-ratio:16/9"
,也可以是style="--aspect-ratio:1.4;"
。同时也可以借助于第二个方案中的calc()
。因为CSS的变量和calc()
函数的结合是一种完美的结合。
1 2 3 |
|
padding & 伪元素
前面的方案都是在.aspectration
元素上使用padding
值。但在CSS中,还可以使用CSS的伪元素::before
或::after
来撑开容器。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
|
视窗单位
CSS新特性中提供了一种新的单位vw
。了解过这个单位的同学都知道,浏览器100vw
表示的就是浏览器的视窗宽度(Viewport)。打个比方说,如果你的浏览器是1334px
,那么对就的100vw = 1334px
。这个时候也就是说1vw = 13.34px
。这里的100vw
也对应前面方案中的100%
。这样我们就可以把前面的%
单位换成vw
的单位。打个比方说,16:9
对应的就是100vw * 9 / 16 = 56.25vw
。这个值可以用在padding-top
或者padding-bottom
中。但这里演示的不再是padding
了,而是把这个值给height
。
1 2 3 4 |
|
上面的示例中width
的值是30vw
,那么对应的height
值就是30vw * 9 / 16 = 16.875vw
。
视窗单位 & CSS Grid
这是一个很有创意的解决方案,使用的都是CSS新特性:视窗单位和CSS Grid Layout。简单说一下其中的实现原理:将容器.aspectration
通过display:grid
声明为一个网格容器,并且利用repeat()
将容器划分为横向比例,比如16
,那么每一格的宽度对应的就是100vw * 9 / 16 = 6.25vw
。同样使用grid-auto-rows
,将其设置的值和横向的值一样。在子元素上通过grid-column
和grid-row
按比例合并单元格。
1 2 3 4 5 6 7 8 9 10 |
|
(学习视频分享:css视频教程)
以上就是用css怎么实现实现宽高比的详细内容,更多文章请关注木庄网络博客!
相关阅读 >>
更多相关阅读请进入《css》频道 >>
Vue.js 设计与实现 基于Vue.js 3 深入解析Vue.js 设计细节
本书对 Vue.js 3 技术细节的分析非常可靠,对于需要深入理解 Vue.js 3 的用户会有很大的帮助。——尤雨溪,Vue.js作者