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

时间:2018-03-28 04:02:52

标签: html css aspect-ratio css-hack

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

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

width based on height

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

编辑(2019-28-02):我为在下一点上不清楚而道歉,但为了让文字换行,文字所在的区域应该有最大值宽度。截至今天,Marc Bellêtre's solution非常接近。

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

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

1 个答案:

答案 0 :(得分: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

enter image description here