CSS Aspect Ratio - 根据动态父高度设置子元素的宽度

Question

首先，让我解释一下我所知道的存在并尝试过的变体：

• The typical aspect ratio hack，它管理一个高度 基于宽度的元素。
• Stackoverflow answers，其中 高度由图像决定，然后决定宽度 容器。

我感兴趣的是纯 CSS 解决方案，具有您能想到的任何 hacky、新奇、实验性的属性，可实现以下结果：

卡片的高度取决于内容（在本例中为标题和段落）。我们称之为h。卡片中的另一个元素应该是相同的h 高度（基于兄弟的内容），无论h 的数量是多少，它也应该是该元素的宽度（创建一个正方形）。

编辑 (2019-28-02)：我很抱歉没有明确说明下一点，但是为了使文本自动换行，文本所在的区域应该有一个最大值宽度。诚然，Marc Bellêtre's solution 到今天为止非常接近。

这个问题与an older question 非常相似，后者没有收到任何回复。不同之处在于，在这种情况下，父级没有收到任何明确的高度值。父卡片的高度完全由里面的文字决定。我可以想象，如果这个问题没有收到任何回应/解决方案，这可能没有什么不同，特别是因为这稍微困难一些。但是，从那时起，新技术出现了（即：flexbox/grid），这可能会有所帮助。

请不要使用 JavaScript 解决方案。我非常清楚如何使用它来实现这一点。

编辑 (2021-28-10)：您会认为，经过 2 年和 CSS 中的一个名为 aspect-ratio 的属性，我们现在已经有了解决方案。但事实并非如此。请参阅提供的 sn-p。

.card {
  background: #ddd;
  display: inline-flex;
}

.aspect-ratio {
  border: 1px solid;
  padding: 1em;
  aspect-ratio: 1 / 1;
  background: #ccc;
}

.content {
  padding: 1em;
  flex: 1 1 200px;
}

h3,
p {
  margin: 0;
}

<div class="card">
  <div class="aspect-ratio">(h)</div>
  <div class="content">
    <h3>Title</h3>
    <p contenteditable>The more I type, the taller this box gets (h)</p>
  </div>
</div>

有时当我加载此代码时，框甚至不是方形的。最大的问题是它根本不尊重height: 100%，但是在调整浏览器或内容的大小之后它将是方形的。更新比率会使框变大。

Answer 1

您可以使用具有 1:1 纵横比和 flex 属性的图像来实现此目的。

section {
  display: flex;
}

.square {
  display: grid;
  background-color: lightgrey;
}

img {
  height: 100%;
  width: auto;
  max-width: 200px;
  visibility: hidden;
}

.text {
  padding-left: 1rem;
}

<section>
  <div class="square">
    <img src="https://upload.wikimedia.org/wikipedia/commons/1/1a/1x1_placeholder.png" />
  </div>

  <div class="text">
    <h1>Title</h1>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla vulputate lectus nec ligula fermentum suscipit. Nam lobortis turpis sed augue interdum maximus.</p>
  </div>
</section>

2021 年 7 月编辑：

由于某种原因，如果不将 display: grid 添加到像素容器中，之前的解决方案将不再有效。
还有一个我没有设法修复的错误导致元素在调整窗口大小之前有时具有错误的纵横比。

此外，此解决方案还有一个主要缺点，因为它会在文本换成多行时立即中断，从而使其高度太大。然后正方形根据高度增加宽度，减少高度再次增加的文本的宽度......最终进入某种无限循环。 在图像上使用max-width 可以避免这种情况，但显然这会破坏纵横比。

无论如何，这更像是一种 hack，而不是问题的真正解决方案，但如果不使用 Javascript，我找不到更好的方法来实现这一点。