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

我试图将它们组合在一起，以带来一个完全可移植和可调整大小的解决方案……诀窍是使用自动缩放图像，但使用内联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

您可以通过使用SVG来实现这一点。

这要视情况而定，但在某些情况下它真的很有用。举个例子，你可以设置background-image而不设置固定的高度，或者用它来嵌入youtube <iframe>，比例为16:9，位置:绝对等。

对于3:2的比例设置viewBox="0 0 3 2"等等。

例子:

div { 背景颜色:红色 ｝ svg { 宽度:100%; 显示:块; 可见性:隐藏 ｝ .demo-1{宽度:35%} .demo-2{宽度:20%} < div class = " demo-1”> <svg viewBox="0 0 3 2"></svg> . < / div > <人力资源> < div class = " demo-2”> <svg viewBox="0 0 3 2"></svg> . < / div >

新的纵横比标签会很棒，但它打乱了我的divs的定位。 填充包装器div的传统解决方案是有效的，但只能根据父类或视口的宽度调整大小，当高度是限制因素时，这就产生了问题。

我发现min()函数非常有用，并调整了传统的方法，如下所示:

身体{ background-image: linear-gradient(到右上，#FFE6B5， #B3CEBF); 填充:0; 保证金:0自动; overflow-y:隐藏;/*这是为了避免在视口高度小于纵横比要求*/时滚动 ｝ .wrapper { 位置:相对; 宽度:100大众; max-height: 100 vh; ｝ .sixteen-by-nine。宽高比{ 衬底:56.25% /* 9:16比*/ ｝ .content { 位置:绝对的; 上图:0;底部:0;左:0;右:0; 背景颜色:绿色 ｝ .centered { 位置:绝对的; 左:50%; 上图:50%; 转换:翻译(-50%，-50%); 高度:100%; 宽度:min(177.8vh, 100%);/*这总是在视口中保持16:9的比例*/ 字体大小:最小(1.7 3 vh,大众);/*如果你也对缩放字体大小*/感兴趣 背景颜色:蓝色 ｝ 身体< > < div class = "包装" > <div class=" 16x9纵横比"></div> <div class="content" > < div class = "集中" > <！——东西在这里——> < / div > < / div > < / div > 身体< / >

只需创建一个包装器<div>，并为padding-bottom设置一个百分比值，如下所示:

.demoWrapper { 填充:10 px; 背景:白色; box-sizing: border-box; 调整:水平; 边框:1px虚线; 溢出:汽车; max-width: 100%; 高度:calc(100vh - 16px); } div { 宽度:100%; padding-bottom: 75%; 背景:黄金;/** <——用于演示**/ } < div class = " demoWrapper”> < div > < / div > < / div >

它将生成一个<div>，其高度等于其容器宽度的75%(4:3长宽比)。

这依赖于以下事实:

百分比是根据生成的盒子的包含块的宽度计算的[…](来源:w3.org，重点是我的)

其他纵横比和100%宽度的填充底部值:

aspect ratio  | padding-bottom value
--------------|----------------------
    16:9      |       56.25%
    4:3       |       75%
    3:2       |       66.66%
    8:5       |       62.5%

在div中放置内容:

为了保持div的纵横比并防止它的内容被拉伸，你需要添加一个绝对定位的子元素，并将其拉伸到包装器的边缘:

div.stretchy-wrapper {
  position: relative;
}

div.stretchy-wrapper > div {
  position: absolute;
  top: 0; bottom: 0; left: 0; right: 0;
}

这里有一个演示和另一个更深入的演示

2022解决方案-使用CSS的纵横比属性

<div class='demo'></div>

.demo {
  background: black;
  width: 500px;
  aspect-ratio: 4/3;
}

更新:现在所有常绿浏览器都支持这个解决方案

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

很酷，是吧?

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