保持具有动态高度的 div 的纵横比

Question

我想通过纯 CSS 创建一个方形 div，height 是动态的，width 将基于 height 进行缩放。

正如我们在下面的片段中看到的，container 高度是基于其内容的动态。 红色square 占据container 的全高，宽度应等于height。
我知道我们可以maintain aspect ratio of a div base on its width 但当height 是动态时我找不到方法。

任何帮助，将不胜感激！非常感谢！

请注意：高度是动态的，因此the solution with vh 不起作用，并且片段只是一个游乐场。

#container {
  width: 400px;
  padding: 20px;
  border: solid 1px black;
  position: relative; 
}

.square {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0; 
  background-color: red;
  
  width: 100px /*Hmm its just a dummy value*/
}

<div id="container">
  <div class="content">
    I'm a dynamic content
  </div>
  <div class="square"></div>
</div>

Answer 1

给你。

注意我在content div中添加了contenteditable，这样你就可以输入sn -p来添加几行文字看看效果。当然，这在您的版本中不是必需的。

#container {
  width: 400px;
  padding: 20px;
  border: solid 1px black;
  position: relative; 
}

.square {
  position: absolute; z-index:-1;
  left:0;
  top: 0;
  right: 0;
  bottom: 0; 
  background-image:url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsIAAA7CARUoSoAAAAANSURBVBhXY/jPwPAfAAUAAf+mXJtdAAAAAElFTkSuQmCC');
  background-size:contain; background-position:100% 0;
  background-repeat:no-repeat;
}

<div id="container">
  <div class="content" contenteditable="true">
    I'm a dynamic content
  </div>
  <div class="square"></div>
</div>

诀窍在于背景现在是一个红色正方形（它是一个 1×1 图像），其大小为 contain。恐怕background-color 不可能做到这一点。

Answer 2

这是另一种解决方案：

我们可以在主 .square div 中创建一个内部 div 继承其父级高度。

然后，如果我们旋转那个内部 div，它的高度现在变成了它的宽度。所以此时我们要做的就是隐藏父 div 的溢出，并应用一些平移，使其在正确的位置结束。

#container {
  width: 400px;
  padding: 20px;
  border: solid 1px black;
  position: relative;
}

.square {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  overflow: hidden;
  pointer-events: none;
}

.square>div {
  background-color: red;
  transform: rotate(-90deg) translate(100%, 0%);
  width: 100vw;
  height: 100%;
  transform-origin: 100% 100%;
}

<div id="container">
  <div class="content">
    <textarea> I'm a dynamic content</textarea>
  </div>
  <div class="square">
    <div></div>
  </div>
</div>