我想创建一个div ，可以随着窗口宽度的变化改变其宽度 / 高度。

是否有任何 CSS3 规则允许高度根据宽度改变， 同时保持其宽高比 ？

我知道我可以通过 JavaScript 实现这一点，但我更喜欢只使用 CSS。

只需使用padding-bottom的百分比值创建一个包装器<div> ，如下所示：

div {
  width: 100%;
  padding-bottom: 75%;
  background: gold; /** <-- For the demo **/
}

<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;
}

这是一个演示和另一个更深入的演示

vw单位：

您可以将vw单位用于元素的宽度和高度 。这允许基于视口宽度保留元素的宽高比。

vw：视口宽度的 1/100。 [ MDN ]

或者，您也可以使用vh作为视口高度，甚至vmin / vmax使用视口尺寸的较小 / 较大（ 此处讨论）。

示例：1：1 宽高比

div {
  width: 20vw;
  height: 20vw;
  background: gold;
}

<div></div>

对于其他宽高比，您可以使用下表根据元素的宽度计算高度值：

aspect ratio  |  multiply width by
-----------------------------------
     1:1      |         1
     1:3      |         3
     4:3      |        0.75
    16:9      |       0.5625

示例：方形 div 的 4x4 网格

body {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
div {
  width: 23vw;
  height: 23vw;
  margin: 0.5vw auto;
  background: gold;
}

<div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div>

这是一个小提琴这个演示 ，这里是一个解决方案，使一个响应网格的正方形与 verticaly 和 horizontaly 居中的内容 。

浏览器对 vh / vw 单元的支持是 IE9 + 请参阅canIuse 以获取更多信息

我已经找到了使用 CSS 执行此操作的方法，但您必须小心，因为它可能会根据您自己的网站流量而改变。我已经完成了它，以便在我的网站的流体宽度部分内嵌入具有恒定宽高比的视频。

假设您有这样的嵌入式视频：

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

然后，您可以将所有内容放在带有 “视频” 类的 div 中。此视频类可能是您网站中的流媒体元素，因此它本身没有直接的高度限制，但是当您调整浏览器大小时，它将根据网站的流量改变宽度。这可能是您在保持视频的某个宽高比时可能尝试获取嵌入视频的元素。

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

！重要的是，图像具有您希望保持的正确宽高比。此外，请确保图像的大小至少与您期望的视频（或任何维持 AR 的大小）一样大，以便根据您的布局获得。这将避免在调整百分比大小时图像分辨率中的任何潜在问题。例如，如果您想保持 3：2 的宽高比，请不要只使用 3px x 2px 图像。它可能在某些情况下有效，但我没有测试过，它可能是一个好主意，可以避免。

您可能应该已经为网站的流体元素定义了这样的最小宽度。如果没有，最好这样做是为了避免在浏览器窗口太小时关闭元素或重叠元素。在某些时候最好有一个滚动条。网页应该获得的最小宽度约为 600 像素（包括任何固定宽度的列），因为除非您正在处理适合手机的网站，否则屏幕分辨率不会变小。 ！

我使用了一个完全透明的 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％，充分利用动态图像提供的不动产。

很酷，嗯？

您可能需要稍微使用它来使其与您自己的设计一起工作，但这实际上对我来说效果非常好。一般的概念就在那里。