这里是我的解决方案，以保持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上演示

我是这样做的:

[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>

源

我遇到过这个问题很多次，所以我为它做了一个JS解决方案。这基本上是根据你指定的元素宽度比例来调整domElement的高度。你可以这样使用它:

<格比=“4x3”></div>

请注意，因为它正在设置元素的高度，元素应该是一个display:block或display:inline-block。

https://github.com/JeffreyArts/html-ratio-component

只是一个想法或黑客。

div { 背景颜色:蓝色; 宽度:10%; 过渡:底色0.5s，宽度0.5s; 字体大小:0; ｝ div:{徘徊 宽度:20%; 背景颜色:红色; ｝ img { 宽度:100%; 高度:汽车; 可见性:隐藏; ｝ < div > <！—使用具有目标纵横比的图像。样本是一个正方形——> <img src="http://i.imgur.com/9OPnZNk.png" /> < / div >

container {
   height: 100vh;
   width: 100vw;
}
.container div {
   height: 4em;
   width: 3em;
}

CSS对此有一个新的属性:aspect-ratio。

https://developer.mozilla.org/en-US/docs/Web/CSS/aspect-ratio

@supports(纵横比:1 / 1){ div { 纵横比:16 / 9; 背景颜色:橙色; ｝ ｝ <div style="width: 200px"></div> . <人力资源/ > <div style="width: 400px"></div> . <人力资源/ > <div style="height: 50px"></div> . <人力资源/ > <div style="height: 10px"></div> .

Chrome和Edge从V88开始完全支持它，Firefox从V81开始支持它(设置layout.css.aspect-ratio。在about:config中启用为true)。

兼容性信息请访问https://caniuse.com/mdn-css_properties_aspect-ratio