我已经找到了一种使用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%来充分利用动态图像提供的空间。

很酷，是吧?

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

艾略特启发我想出了这个解决方案——谢谢:

png是一个完全透明的png文件，大小和你喜欢的纵横比一样，在我的例子中是30x10像素。

HTML

<div class="eyecatcher">
  <img src="/img/aspectratio.png"/>
</div>

CSS3

.eyecatcher img {
  width: 100%;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  background-image: url(../img/autoresized-picture.jpg);
}

请注意:background-size是css3特性，可能不适用于你的目标浏览器。你可以检查互操作性(f.e.在caniuse.com)。

保持纵横比的一个简单方法，使用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 >

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

正如w3schools.com网站上所述，并在这个公认的答案中有所重申，填充值为百分比(重点是我的):

以包含元素宽度的百分比指定填充

因此，一个保持16:9纵横比的响应式DIV的正确示例如下:

CSS

.parent {
    position: relative;
    width: 100%;
}
.child {
    position: relative;
    padding-bottom: calc(100% * 9 / 16);
}
.child > div {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
}

HTML

<div class="parent">
    <div class="child">
        <div>Aspect is kept when resizing</div>
    </div>
</div>

在JSFiddle上演示

我想只是使用rem或em应该解决固定比例的问题，但不会像vw或vh那样难以绑定到屏幕上，或者像%那样痛苦地使用flexbox。好吧，没有一个答案适合我，在我的情况下，这对我来说很重要:

<div class="container">
   <div>
   </div>
</div>

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

或者用rem，但是不管怎样，它们中的任何一个都可以。 Rem使用默认的字体大小值，而em使用最接近的字体大小。