CSS 能否通过动态匹配元素高度和宽度来保持 1:1 的纵横比？

在 CSS 流体布局中动态匹配高度和宽度

在流体 CSS 布局中，元素可以根据可用空间自动调整其大小。当尝试保持特定的宽高比（例如正方形或矩形）时，这可能会带来挑战。

问题：

CSS 可以用来设置高度元素与其宽度相同，保持 1:1 的宽高比比率？

示例：

考虑具有以下结构的容器元素和嵌套 div 元素，布局：

+----------+
| body     |
| 1:3      |
|          |
| +------+ |
| | div  | |
| | 1:1  | |
| +------+ |
|          |
|          |
|          |
|          |
|          |
+----------+

CSS：

div {
  width: 80%;
  height: same-as-width
}

解决方案：

虽然不能设置高度明确地仅使用 CSS 来匹配宽度，可以使用虚拟元素和巧妙的方法来实现解决方法

#container {
  display: inline-block;
  position: relative;
  width: 50%;
}

#dummy {
  margin-top: 75%;
  /* 4:3 aspect ratio */
}

#element {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: silver/* show me! */
}

<div>

通过使用虚拟元素上的 margin-top 属性并将其设置为 75%（以匹配 4:3 的宽高比），我们创建高度的参考。然后，该元素绝对定位在该参考区域内，导致高度等于其宽度。

以上是CSS 能否通过动态匹配元素高度和宽度来保持 1:1 的纵横比？的详细内容。更多信息请关注PHP中文网其他相关文章！