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

Question

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

• The typical aspect ratio hack，根据宽度管理元素的高度。
• Stackoverflow answers，其高度由图像决定，然后决定容器的宽度。

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

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

编辑（2019-28-02）：我为在下一点上不清楚而道歉但是，为了使文本换行，文本所在的区域应该具有最大宽度。到目前为止，Marc Bellêtre's solution非常接近。

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

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

Answer 1

您可以使用宽高比为1：1的图像和flex属性来实现此目的。

HTML：

<section>
  <div class="square"><img src="http://1x1px.me/000000-0.1.png" /></div>
  <div class="text">
    <h1>Title</h1>
    <p>Lorem ipsum dolor sit amet.<br />Lorem ipsum dolor sit amet.<br />Lorem ipsum dolor sit amet.<br />Lorem ipsum dolor sit amet.<br />Lorem ipsum dolor sit amet.<br />Lorem ipsum dolor sit amet.</p>
  </div>
</section>

CSS：

section {
  display: flex;
}

.square img {
  height: 100%;
}

View on Codepen。 如果图像没有显示只生成一个新的here。