实现方法：1、 利用 padding属性和“%”单位；2、利用padding和calc()属性；3、利用padding属性和 CSS变量 ；4、利用padding属性和伪元素；5、直接利用视窗单位“vw”；6、使用视窗单位配合CSS Grid布局。
本教程操作环境：windows7系统、CSS3 && HT ML 5版、Dell G3 电 脑。
长 宽 比故事
长宽比 在影视 制作 中又被称之为 宽高比 ，指的是一个视频的宽度除以它的高度所得到的比例，通常表示为 x:y 或 x×y ，其中的冒号和叉号表示中文的“比”之意。目前，在 电影 工业中最常被使用的是an am orphic比例（即 2.39:1 ）。传统的 4:3 仍然被使用于现今的许多电视画面上，而它成功的后继规格 16:9 则被用于高清晰度电视或数字电视上。常见的比例：
有关于长宽比更多的介绍可以阅读Wiki上的As PE ct 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 -t op 或者 padding-bottom 的百分比值，实现容器长宽比。在CSS中 padding-top 或 padding-bottom 的百分比值是根据容器的 width 来计算的。如此一来就很好的实现了容器的长宽比。采用这种方法，需要把容器的 h ei ght 设置为 0 。而容器内容的所有元素都需要采用 pos IT ion: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 &am p; calc()
这个方案采用的是 padding 和 calc() 配合在一起使用。其实原理和第一个方案是一样的。只不过在第一个方案中，我们每次都需要对 padding 的值计算，如果使用 calc() 可以通过浏览器直接计算出 padding 的百分比值。
.aspectration[data-ratio="16:9"] {
padding-top: calc(100% * 9 / 16);
}padding & CSS变量
对于变量而言，以前是其他计算器语言和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)));
}padding & 伪元素
前面的方案都是在 .aspectration 元素上使用 padding 值。但在CSS中，还可以使用CSS的伪元素 :: before 或 : :after 来撑开容器。
.aspectration {
position: relative;
}
.aspectration:after {
content: "";
dis play : block;
width: 1px;
m arg in-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 Grid
这是一个很有创意的解决方案，使用的都是CSS新特性：视窗单位和CSS Grid Layout。简单说一下其中的@R_ 512 _1741@：将容器 .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怎么实现实现宽高比的详细内容，更多请关注其它相关 文章 ！
总结
以上是 为你收集整理的 用css怎么实现实现宽高比 全部内容，希望文章能够帮你解决 用css怎么实现实现宽高比 所遇到的问题。
如果觉得 网站内容还不错， 推荐好友。