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

Question

首先,让我解释一下我所知道的内容,并尝试了以下变体:

• 典型的宽高比hack,它根据宽度管理元素的高度.
• Stackoverflow应答,其中高度由图像确定,然后图像决定容器的宽度.

我感兴趣的是纯CSS解决方案,无论你能想到什么hacky,new-fangled,实验性属性,都能达到以下效果:

卡的高度基于内容(在这种情况下是标题和段落).我们称之为h.卡片中的另一个元素应该是相同的h高度(基于兄弟的内容),无论该h数量是多少,它也应该是该元素的宽度(以创建正方形).

编辑(2019-28-02):我为在下一点上不清楚而道歉,但是,为了使文本换行,文本所在的区域应该具有最大宽度.截至今天,MarcBellêtre的解决方案非常接近.

这个问题与一个没有收到任何回复的旧问题非常相似.不同之处在于,在这种情况下,父级没有接收任何明确的高度值.父卡的高度完全取决于其中的文本.我可以想象,如果这个问题没有得到任何回应/解决方案,这可能会有所不同,特别是因为这稍微困难一些.然而,自那时以来出现了新技术(即:flexbox/grid),这可能会有所帮助.

请不要使用JavaScript解决方案.我非常清楚如何使用它实现这一目标.

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在图像上使用 a 来避免这种情况，但显然这会破坏纵横比。

无论如何，这更像是一种黑客行为，而不是问题的真正解决方案，但我找不到更好的方法来实现这一目标而不使用 Javascript。