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。