使用 CSS 保持 div 的纵横比

Question

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

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

我知道我可以通过 JavaScript 做到这一点，但我更愿意只使用 CSS。

原文由 jackb 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

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

 .demoWrapper {
  padding: 10px;
  background: white;
  box-sizing: border-box;
  resize: horizontal;
  border: 1px dashed;
  overflow: auto;
  max-width: 100%;
  height: calc(100vh - 16px);
}

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

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

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

原文由 Web_Designer 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

有 几种方法可以在像 div 这样的元素上指定固定的宽高比，这里是其中的两种：

1. aspect-ratio CSS属性

 div {
  aspect-ratio: 1 / 1;
  width: 50%;
  background: teal;
}

 <div>aspect-ratio: 1 / 1;</div>

这是最简单灵活的解决方案。它直接为元素指定固定的宽度与高度（或高度与宽度）纵横比。这意味着您还可以根据元素 height 指定纵横比。

它不依赖于父宽度（如填充技术）或视口大小（如以下 vw 单元技术）它依赖于元素自己的宽度或高度 有关 MDN 的更多信息。与其他解决方法相比，这就是它如此强大的原因。

这是一座现代酒店（2021 年）。所有现代浏览器都支持它，请参阅 caniuse 以获得精确的浏览器支持。

以下是一些具有不同纵横比的示例：

 .ar-1-1  {aspect-ratio: 1 / 1;}
.ar-3-2  {aspect-ratio: 3 / 2;}
.ar-4-3  {aspect-ratio: 4 / 3;}
.ar-16-9 {aspect-ratio: 16 / 9;}
.ar-2-3  {aspect-ratio: 2 / 3;}
.ar-3-4  {aspect-ratio: 3 / 4;}
.ar-9-16 {aspect-ratio: 9 / 16;}

/** For the demo : **/
body {
  display:flex;
  flex-wrap:wrap;
  align-items:flex-start;
}
div {
  background: teal;
  width: 23%;
  margin:1%;
  padding:20px 0;
  box-sizing: border-box;
  color:#fff;
  text-align:center;
}

 <div class="ar-1-1">aspect-ratio: 1 / 1;</div>
<div class="ar-3-2">aspect-ratio: 3 / 2;</div>
<div class="ar-4-3">aspect-ratio: 4 / 3;</div>
<div class="ar-16-9">aspect-ratio: 16 / 9;</div>
<div class="ar-2-3">aspect-ratio: 2 / 3;</div>
<div class="ar-3-4">aspect-ratio: 3 / 4;</div>
<div class="ar-9-16">aspect-ratio: 9 / 16;</div>

2. 使用 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>

Here is a Fiddle with this demo 和 here is a solution to make a responsible grid of squares with verticaly and horizontaly centered content 。

---

对 vh/vw 单位的浏览器支持是 IE9+，请参阅 canIuse 了解更多信息

原文由 web-tiki 发布，翻译遵循 CC BY-SA 4.0 许可协议