我是这样做的:

[data-aspect-ratio] {
    display: block;
    max-width: 100%;
    position: relative;
}

[data-aspect-ratio]:before {
    content: '';
    display: block;
}

[data-aspect-ratio] > * {
    display: block;
    height: 100%;
    left: 0;
    position: absolute;
    top: 0;
    width: 100%;
}
[data-aspect-ratio="3:1"]:before {
    padding-top: 33.33%;
}
[data-aspect-ratio="2:1"]:before {
    padding-top: 50%;
}
[data-aspect-ratio="16:9"]:before {
    padding-top: 56.25%;
}
[data-aspect-ratio="3:2"]:before {
    padding-top: 66.66%;
}
[data-aspect-ratio="4:3"]:before {
    padding-top: 75%;
}
[data-aspect-ratio="1:1"]:before {
    padding-top: 100%;
}
[data-aspect-ratio="3:4"]:before {
    padding-top: 133.33%;
}
[data-aspect-ratio="2:3"]:before {
    padding-top: 150%;
}
[data-aspect-ratio="9:16"]:before {
    padding-top: 177.77%;
}
[data-aspect-ratio="1:2"]:before {
    padding-top: 200%;
}
[data-aspect-ratio="1:3"]:before {
    padding-top: 300%;
}

例如:

<div data-aspect-ratio="16:9"><iframe ...></iframe></div>

源

Chrome 88的新特性是CSS的宽宽比属性，其他浏览器也很快会加入。

纵横比CSS属性为盒子设置了一个优先的纵横比，它将用于自动大小的计算和一些其他的布局功能。

CSS技巧文章

更多的信息

div { 背景:rebeccapurple; 身高:100 px; 保证金:1 em汽车; ｝ .square { 纵横比:1 / 1; ｝ < div class = "广场”> < / div >

我已经找到了一种使用CSS来做到这一点的方法，但你必须小心，因为它可能会根据你自己网站的流程而变化。我这样做是为了在我的网站的流体宽度部分中嵌入具有恒定长宽比的视频。

假设你有一个这样的嵌入视频:

<object>
     <param ... /><param ... />...
     <embed src="..." ...</embed>
</object>

然后你可以把这些都放在一个带有“video”类的div中。这个视频类可能是你网站中的流动元素，它本身没有直接的高度限制，但当你调整浏览器的大小时，它会根据网站的流量改变宽度。这可能是你想要嵌入视频的元素，同时保持一定的视频宽高比。

为了做到这一点，我在“video”类div中的嵌入对象之前放了一张图像。

! !重要的部分是图像具有您希望保持的正确长宽比。此外，确保图像的大小至少与你期望的视频(或你正在维护的A.R.)根据你的布局得到的最小尺寸一样大。这将避免在调整百分比大小时图像分辨率中的任何潜在问题。例如，如果你想保持3:2的纵横比，不要只使用3px * 2px的图像。它在某些情况下可能会工作，但我还没有测试过，避免使用它可能是个好主意。

您可能已经为网站的流体元素定义了这样的最小宽度。如果没有，那么这样做是一个好主意，以避免在浏览器窗口变得太小时删除元素或出现重叠。在某些地方最好有一个滚动条。一个网页的最小宽度应该在600px左右(包括任何固定宽度的列)，因为屏幕分辨率不能再小了，除非你处理的是手机友好型网站。! !

我使用一个完全透明的png，但我真的不认为它最终是重要的，如果你做得对。是这样的:

<div class="video">
     <img class="maintainaspectratio" src="maintainaspectratio.png" />
     <object>
          <param ... /><param ... />...
          <embed src="..." ...</embed>
     </object>
</div>

现在你应该能够添加类似于下面的CSS:

div.video { ...; position: relative; }
div.video img.maintainaspectratio { width: 100%; }
div.video object { position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; }
div.video embed {width: 100%; height: 100%; }

确保您还删除了对象和嵌入标记中任何显式的高度或宽度声明，这些标记通常带有复制/粘贴嵌入代码。

它的工作方式取决于视频类元素的位置属性和你想要的项目保持一定的纵横比。它利用了图像在元素中调整大小时保持适当长宽比的方法。它告诉视频类元素中的任何其他元素，通过强制其宽度/高度为图像所调整的视频类元素的100%来充分利用动态图像提供的空间。

很酷，是吧?

您可能需要稍微摆弄一下才能让它与您自己的设计一起工作，但这实际上对我来说工作得非常好。大概的概念是这样的。

保持纵横比的一个简单方法，使用canvas元素。

尝试调整下面的div的大小，看看它的作用。

对我来说，这种方法效果最好，所以我把它分享给其他人，这样他们也能从中受益。

.cont { 边框:5px纯蓝色; 位置:相对; 宽度:300 px; 填充:0; 保证金:5 px; 调整:水平; 溢出:隐藏; ｝ .ratio { 宽度:100%; 保证金:0; 显示:块; ｝ .content { Background-color: rgba(255, 0,0, 0.5); 位置:绝对的; 上图:0; 左:0; 宽度:100%; 高度:100%; 保证金:0; ｝ < div class = "跟" > <canvas class="ratio" width="16" height="9"></canvas> <div class="content">我是16:9</div> < / div >

也适用于动态高度!

.cont { 边框:5px纯蓝色; 位置:相对; 身高:170 px; 填充:0; 保证金:5 px; 调整:垂直; 溢出:隐藏; 显示:inline-block;/*所以div不会自动扩展到最大宽度*/ ｝ .ratio { 高度:100%; 保证金:0; 显示:块; ｝ .content { Background-color: rgba(255, 0,0, 0.5); 位置:绝对的; 上图:0; 左:0; 宽度:100%; 高度:100%; 保证金:0; ｝ < div class = "跟" > <canvas class="ratio" width="16" height="9"></canvas> <div class="content">我是16:9</div> < / div >

这里是我的解决方案，以保持16:9纵横比在纵向或横向的div与可选的固定边距。

它是宽度/高度和最大宽度/最大高度属性与vw单位的组合。

在这个示例中，悬停时添加了50px的上下边距。

html { 高度:100%; ｝ 身体{ 保证金:0; 高度:100%; ｝ .container { 显示:flex; justify-content:中心; 对齐项目:中心; 高度:100%; ｝ .fixedRatio { max-width: 100大众; Max-height: calc(9 / 16 * 100vw); 宽度:calc(16 / 9 * 100vh); 身高:100 vh; /*调试*/ 显示:flex; justify-content:中心; 对齐项目:中心; 背景颜色:蓝色; 字体大小:2快速眼动; 字体类型:“天线”; 颜色:白色; 过渡:宽度0.5s进出，高度0.5s进出; ｝ .fixedRatio:{徘徊 宽度:calc(16 / 9 * (100vh - 100px)); 高度:calc(100vh - 100px); ｝ < div class =“容器”> < div class = ' fixedRatio ' > 16:9 < / div > < / div >

在JSFiddle上演示

虽然大多数答案都很酷，但大多数都要求已经正确大小的图像……其他解决方案只适用于宽度，而不关心可用的高度，但有时您也希望将内容适应于特定的高度。

我试图将它们组合在一起，以带来一个完全可移植和可调整大小的解决方案……诀窍是使用自动缩放图像，但使用内联svg元素，而不是使用预渲染的图像或任何形式的第二个HTTP请求…

div.holder { 背景颜色:红色; 显示:inline-block; 身高:100 px; 宽度:400 px; ｝ svg img { 背景颜色:蓝色; 显示:块; 高度:汽车; 宽度:汽车; max-width: 100%; max-height: 100%; ｝ .content_sizer { 位置:相对; 显示:inline-block; 高度:100%; ｝ .content { 位置:绝对的; 上图:0; 底部:0; 左:0; 右:0; background - color: rgba(155255年,0,0.5); ｝ < div class = "架" > < div class = " content_sizer”> <svg width=10000 height=5000 /> < div class = "内容" > < / div > < / div > < / div >

请注意，我在SVG的width和height属性中使用了较大的值，因为它需要大于预期的最大大小，因为它只能缩小。这个例子使div的比例为10:5