放大方形 div 以适应父 div，同时保持纵横比答案

【问题标题】：Scale up a square div to fit parent div while maintaining aspect ratio放大方形 div 以适应父 div，同时保持纵横比
【发布时间】：2021-10-06 09:15:39
【问题描述】：

所以这让我发疯了，我想知道是否有办法用纯 CSS 来做到这一点。我想要做的是有一个固定高度的父 div（紫色）。在那个紫色 div 中，我希望橙色 div 保持纵横比并放大到父 div 的高度。如果我更改父 div 的大小，橙色 div 应根据其纵横比相应缩放。

注意：尝试在没有图像或百分比父高度的情况下执行此操作。

参见示例：

【问题讨论】：

Maintain div aspect ratio according to height的可能重复
不，我正在尝试在没有图像和父级固定 px 高度的情况下执行此操作。
图片是技巧的一部分——您可以将其设为透明（不可见）的 1x1 PNG 并仍然完成任务。该方法允许父级为任意高度，而不是固定的 px 数量。
我正在寻找一种完全不涉及使用图像的解决方案（出于语义目的）。希望有另一种技巧或方法来做到这一点。

标签： html height fixed aspect-ratio

【解决方案1】：

你可以用一些简单的 JS 来完成。只需获取孩子（或父母）的高度并设置宽度。您可以根据需要使用计算来获得所需的比率。

var width = document.getElementById('child').offsetHeight;
document.getElementById('child').style.width = width + 'px';

#parent{
  width: 100%;
  height: 100px;
  background-color: purple;
}
#child{
  height: 100%;
  background-color: yellow;
}

<div id="parent">
  <div id="child"></div>
</div>

【讨论】：

感谢您发送此信息。你认为JS是唯一的方法吗？我正在尝试用纯 css 解决它。玩弄 flex box 和其他一些边距技巧，看看我能不能让它工作。
在css中有一个calc函数可以让你做一些事情，但你真正需要的是一个css变量……而且不支持跨浏览器。
我最终只使用了 sass

【解决方案2】：

使用aspect-ratio的解决方案，调整右下角的父级：

#parent {
  /* fluff */
  background-color: #d121ae;
  resize: both;
  height: 100px;
  overflow: auto;
}

#child {
  /* the useful bits */
  aspect-ratio: 1;
  max-height: 100%;
  
  /* fluff */
  background-color: #ffce1c;
}

<div id="parent">
  <div id="child"></div>
</div>

【讨论】：