CSS/LESS：如何设置 div 的高度等于其父级宽度的 112%？答案

【问题标题】：CSS/LESS: How to set height of div equal to 112% the width of it's parent?CSS/LESS：如何设置 div 的高度等于其父级宽度的 112%？
【发布时间】：2016-08-28 16:20:46
【问题描述】：

我有两个 div，div.outer 和 div.inner：

<div class='outer'><div class='inner'>...content...</div</div>

div.outer 可以独立调整宽度和高度。（不是用户他/她自己。）

在这个 div 内部是 div.inner，其宽度是其父级 div.outer 的 90%。此 div 的纵横比必须为 height / width = 1.24。所以高度必须是宽度的 1.24 倍。

换句话说，如何将 div 的高度设置为其父级宽度的 112%？ (1.2 * 90 ≈ 112) 我正在寻找使用较少或标准 CSS 的解决方案。（如有必要，仅使用 javascript/jQuery）。

这里是伪 CSS：

.outer{
    width: resizable;
    height: resizable;
}

.inner{
    width: 90%;
    height: 1.12 * width_of(.outer);
}

提前致谢。

【问题讨论】：

Can I set the height of a div based on a percentage-based width?的可能重复
@PraveenPuglia 这确实是一个类似的问题。不同的是，我也在寻找使用 Less 的解决方案。
纯 CSS 代码非常适合 LESS。根据那里的答案，我看不出为什么不能在 LESS 文件中使用它。
如果width / height = 1.24 高度大于宽度是不可能的
@blonfu 我的意思是height / width = 1.24，我的错。

标签： css less resizable

【解决方案1】：

有一个技巧可以保持div 的纵横比，我在这个西班牙语博客中学习：https://escss.blogspot.com/2013/08/aspect-ratios-css.html

您必须添加一个额外的div，但可能对您有用或获得解决方案的第一步：

html {
  box-sizing: border-box;
}

*,
*:before,
*:after {
  box-sizing: inherit;
}

.outer {
  width: 300px;
  border: solid 1px green;
}

.inner {
  border: solid 1px red;
  width: 90%;
  position: relative;
}

.inner:before {
  content: "";
  display: block;
  padding-top: 124%;
}

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

<div class="outer">
  <div class="inner">
    <div class="content">
      ... content ...
    </div>
  </div>
</div>

【讨论】：