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

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

由于@web-tiki已经展示了一种使用vh/vw的方法，我还需要一种方法在屏幕中心，这里是9:16人像的代码片段。

.container {
  width: 100vw;
  height: calc(100vw * 16 / 9);
  transform: translateY(calc((100vw * 16 / 9 - 100vh) / -2));
}

translateY会保持这个中心在屏幕上。Calc (100vw * 16 / 9)预计高度为9/16。(100vw * 16 / 9 - 100vh)为溢流高度，因此，拉升溢流高度/2将使其保持在屏幕中心。

为风景，并保持16:9，你显示使用

.container {
  width: 100vw;
  height: calc(100vw * 9 / 16);
  transform: translateY(calc((100vw * 9 / 16 - 100vh) / -2));
}

9/16的比例很容易改变，不需要预定义100:56.25或100:75。如果你想先保证高度，你应该切换宽度和高度，例如:高度:100vh;宽度:calc(100vh * 9 / 16) 9:16纵向。

如果你想适应不同的屏幕尺寸，你可能也会感兴趣

background-size封面/包含 上面的样式类似于包含，取决于宽高比。 object-fit img/video标签的封面/包含 @media(朝向:纵向)/@media(朝向:横向) 媒体查询肖像/风景改变比例。

正如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上演示

您可以使用svg。使容器/包装器的位置相对，首先将svg放置为静态定位，然后放置绝对定位的内容(顶部:0;左:0;右:0;底部:0,)

比例为16:9的例子:

Image.svg:(可以内联到src中)

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 9" width="16" height="9"/>

CSS:

.container {
  position: relative;
}
.content {
  position: absolute;
  top:0; left:0; right:0; bottom:0;
}

HTML:

<div class="container">
  <img style="width: 100%" src="image.svg" />
  <div class="content"></div>
</div>

注意，内联svg似乎不起作用，但你可以urlencode svg并将其嵌入到img src属性中，就像这样:

<img src="data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2016%209%22%20width%3D%2216%22%20height%3D%229%22%2F%3E" style="width: 100%;" />

我刚刚创建了一个2:1的div，调整大小以占据全宽度，但如果它会导致顶部或底部超过，则会缩小宽度。但是请注意，这只适用于窗口的大小，而不是父窗口的大小。

#scene {
    position: relative;
    top: 50vh;
    left: 50vw;
    width: 100vw;
    height: 50vw;
    max-height: 100vh;
    max-width: calc(100vh * 2);
    transform: translate(-50%, -50%);
}

我相信你可以计算出正确的%，用于4:3而不是2:1。

我想分享这一点，因为这是一段令人沮丧的几天的旅程，找到了一个适合我的解决方案。我使用这些填充技术(上面提到过使用一些填充和绝对定位的变化)来为网格/flex布局中的按钮类元素实现1:1的纵横比。布局设置为100vh高，以便始终显示为单个非滚动页面。

填充技术确实工作得很好，但它很容易破坏你的网格布局，并导致爆炸性/讨厌的滚动条。在这种情况下，那些说绝对div不会影响布局的人是错误的，因为父元素在高度和宽度上都在增长，即使子元素没有直接影响布局，父元素也会扰乱你的布局。

通常这不是问题，但在使用网格时需要注意。网格是一个2D布局，它可以在两个轴上考虑大小和布局。我仍然试图理解这的确切性质，但到目前为止，似乎至少如果你在一个网格区域内使用这种技术，在两个轴上都受到fr单位的限制，当纵横比项增长或以其他方式改变布局时，你几乎肯定会遇到井喷(显示:无切换和交换网格区域与css也是布局变化问题，导致我的井喷)。

在我的例子中，我限制了一个不需要的列的高度。将其改为“auto”而不是“1fr”，使我所有的其他布局保持不变，防止井喷，同时仍然让我保持我漂亮的方形按钮!

我不知道这是否是这里每个人沮丧的来源，但这是一个很容易犯的错误，即使使用开发工具也不能让你准确地知道井喷来自哪里，因为在许多情况下，它并不是一个单独的元素井喷出来的情况，而是网格布局扩大自己，以保持那些fr单位在垂直和水平上的准确。