实现方法:1、利用padding属性和“%”单位;2、利用padding和calc()属性;3、利用padding属性和CSS变量;4、利用padding属性和伪元素;5、直接利用视窗单位“vw”;6、使用视窗单位配合CSS Grid布局。
本教程操作环境:windows7系统、CSS3&&HTML5版、Dell G3电脑。
长宽比在影视制作中又被称之为宽高比,指的是一个视频的宽度除以它的高度所得到的比例,通常表示为x:y
或x×y
,其中的冒号和叉号表示中文的“比”之意。目前,在电影工业中最常被使用的是anamorphic比例(即2.39:1
)。传统的4:3
仍然被使用于现今的许多电视画面上,而它成功的后继规格16:9
则被用于高清晰度电视或数字电视上。常见的比例:
有关于长宽比更多的介绍可以阅读Wiki上的Aspect ration一文。
使用CSS实现容器长宽比,常见的HTML模板结构有两种:
<div class="aspectration" data-ratio="16:9"> <div class="content"></div> </div>
另外一种结构是:
<div class="aspectration" data-ratio="16:9"> </div>
具体使用的时候,根据自己使用场景采用不同的结构。
前面也提到过了,使用CSS实现长宽比方案有多种,下面简单的罗列一下这些方案。不过每种方案都不会详细介绍,因为代码非常简单,看一眼代码就能明白其中原理。
这是最早提出的一种实现方案,主要借助的原理是利用padding-top
或者padding-bottom
的百分比值,实现容器长宽比。在CSS中padding-top
或padding-bottom
的百分比值是根据容器的width
来计算的。如此一来就很好的实现了容器的长宽比。采用这种方法,需要把容器的height
设置为0
。而容器内容的所有元素都需要采用position:absolute
,不然子元素内容都将被padding
挤出容器(造成内容溢出)。
比如我们容器的长宽比是16:9
,那么根据计算:100% * 9 / 16
可以得到56.25%
。如果你希望的是4:3
,那么对应的就是100% * 3 / 4
。
具体的CSS代码如下:
.aspectration { position: relative; /*因为容器所有子元素需要绝对定位*/ height: 0; /*容器高度是由padding来控制,盒模型原理告诉你一切*/ width: 100%; } .aspectration[data-ratio="16:9"] { padding-top: 56.25%; } .aspectration[data-ratio="4:3"]{ padding-top: 75%; }
通过通配符*
选择器,让其子元素的宽高和容器.aspectration
一样大小:
.aspectration > * { position: absolute; left: 0; top: 0; width: 100%; height: 100%; }
这个方案采用的是padding
和calc()
配合在一起使用。其实原理和第一个方案是一样的。只不过在第一个方案中,我们每次都需要对padding
的值计算,如果使用calc()
可以通过浏览器直接计算出padding
的百分比值。
.aspectration[data-ratio="16:9"] { padding-top: calc(100% * 9 / 16); }
对于变量而言,以前是其他计算器语言和CSS处理器的特性,不过值得特性的是,现在也是CSS的特性。接下来的这个方案也是基于padding
原理,只不过是借助于CSS变量特性,让前面的方案变得更为灵活一些。使用CSS的变量时,可以把HTML中data-ratio
去掉了。换成style="--aspect-ratio:16/9"
,也可以是style="--aspect-ratio:1.4;"
。同时也可以借助于第二个方案中的calc()
。因为CSS的变量和calc()
函数的结合是一种完美的结合。
.aspectration[style*="--aspect-ratio"] { padding-top: calc(100% / (var(--aspect-ratio))); }
前面的方案都是在.aspectration
元素上使用padding
值。但在CSS中,还可以使用CSS的伪元素::before
或::after
来撑开容器。
.aspectration { position: relative; } .aspectration:after { content: ""; display: block; width: 1px; margin-left: -1px; background-color: orange; } .aspectration[data-ratio="16:9"]:after { padding-top: 56.25%; } .content { width: 100%; height: 100%; position: absolute; top: 0; left: 0; }
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
。
.aspectration[data-ratio="16:9"] { width: 100vw; height: 56.25vw; }
上面的示例中width
的值是30vw
,那么对应的height
值就是30vw * 9 / 16 = 16.875vw
。
这是一个很有创意的解决方案,使用的都是CSS新特性:视窗单位和CSS Grid Layout。简单说一下其中的实现原理:将容器.aspectration
通过display:grid
声明为一个网格容器,并且利用repeat()
将容器划分为横向比例,比如16
,那么每一格的宽度对应的就是100vw * 9 / 16 = 6.25vw
。同样使用grid-auto-rows
,将其设置的值和横向的值一样。在子元素上通过grid-column
和grid-row
按比例合并单元格。
.aspectration { display: grid; grid-template-columns: repeat(16, 6.25vw); grid-auto-rows: 6.25vw; } .aspectration[data-ratio="16:9"] .content { grid-column: span 16; grid-row: span 9; }
(学习视频分享:css视频教程)
以上是用css怎么实现实现宽高比的详细内容。更多信息请关注PHP中文网其他相关文章!