Question

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

正如我们在下面的snipet中看到的那样，container高度是基于其内容的动态。红色square取container的完整高度，宽度应相等height。
我知道我们可以maintain aspect ratio of a div base on its width，但height 动态时我无法找到方法。

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

请注意：高度是动态的，因此the solution with vh无效，snipet只是一个操场。

#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

这是另一个解决方案：

我们可以在主.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>

Answer 2

你走了。

请注意，我在内容div中添加了contenteditable，以便您可以输入代码段来添加文本行以查看效果。当然，这在您的版本中不是必需的。

#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我害怕这是不可能的。

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

2 个答案: