CSS实现长宽比的几种方案

在上一篇文章中总结了CSS如何实现容器长宽比几种方法。对于在CSS中实现容器的长宽比最初的创意是来自于在Web中如何实现纵横比。主要是用于响应式设计中的iframeimgvideo之类的元素。随之扩展为适用于任何的容器长宽比。那在CSS中到底有多少种方案可以实现呢?我一向喜欢做这样的事情,到处搜集多种解决方案。

如果你看到前面的两篇文章,或许你知道一些方法,或者说所有的方案你都想到了。如果是这样的话,你可以停止阅读这篇。如果没有的话,你可以继续往下阅读。

长宽比故事

长宽比在影视制作中又被称之为宽高比,指的是一个视频的宽度除以它的高度所得到的比例,通常表示为x:yx×y,其中的冒号和叉号表示中文的“比”之意。目前,在电影工业中最常被使用的是anamorphic比例(即2.39:1)。传统的4:3仍然被使用于现今的许多电视画面上,而它成功的后继规格16:9则被用于高清晰度电视或数字电视上。常见的比例:

有关于长宽比更多的介绍可以阅读Wiki上的Aspect ration一文。

HTML结构

使用CSS实现容器长宽比,常见的HTML模板结构有两种:

<div class="aspectration" data-ratio="16:9">
    <div class="content"></div>
</div>

另外一种结构是:

<div class="aspectration" data-ratio="16:9">
</div>

具体使用的时候,根据自己使用场景采用不同的结构。

CSS实现长宽比例方案

前面也提到过了,使用CSS实现长宽比方案有多种,下面简单的罗列一下这些方案。不过每种方案都不会详细介绍,因为代码非常简单,看一眼代码就能明白其中原理。

垂直方向的padding

这是最早提出的一种实现方案,主要借助的原理是利用padding-top或者padding-bottom的百分比值,实现容器长宽比。在CSS中padding-toppadding-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来控制,盒模型原理告诉你一切*/
剩余80%内容付费后可查看
* 请输入阅读码(忘记阅读码?

如需转载,烦请注明出处:https://www.w3cplus.com/css/aspect-ratio.html

如果文章中有不对之处,烦请各位大神拍正。如果你觉得这篇文章对你有所帮助,打个赏,让我有更大的动力去创作。(^_^)。看完了?还不过瘾?点击向作者提问!

赏杯咖啡,鼓励他创作更多优质内容!
返回顶部