CSS纵横比 - 根据动态父元素高度设置子元素的宽度

Question

CSS纵横比 - 根据动态父元素高度设置子元素的宽度

htmlcssaspect-ratio

16

首先，让我解释一下我所知道的并尝试过各种变化的东西：

典型的长宽比hack，它根据宽度来管理元素的高度。
Stackoverflow答案，其中高度是由图像确定的，这就决定了容器的宽度。

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

卡片的高度基于内容（在本例中是标题和段落）。我们将其称为 h 。卡片内的另一个元素应该是相同的 h 高度（基于同级别的内容），并且无论那个 h 量是多少，它也应该是该元素的宽度（以创建正方形）。

编辑（2019-28-02）：对于下一个问题，我对此没有明确说明，但为了使文本换行，文本所在的区域应该有最大宽度。Marc Bellêtre的解决方案今天已经非常接近了。

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

请勿使用JavaScript解决方案。 我非常清楚如何使用它来实现此目的。

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

.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>

- Donnie D'Amato

较暗的灰色框不一定是图像，我猜测？ - jhpratt

1

我不是很确定，因为我尽可能避免宽高比的情况（直到属性最终被实现）。只是为了澄清，以防其他人有一个聪明（或不聪明）的解决方法。 - jhpratt

如果文本太长，那么正方形图像将占据父级div，并且文本将向右流动。您需要这种行为吗？我认为允许图像压缩文本列存在风险。如果您在一列中堆叠了许多这样的卡片，那么它看起来就不整洁了。 - YourPalNurav

我没有找到动态增长的解决方案 - 但我认为起点是创建一个具有固定纵横比的容器。可以通过以下方式实现：width: 100%; padding-top: 100%; 对于正方形。在css Tricks中有一些很好的例子：https://css-tricks.com/aspect-ratio-boxes/ - Ina

我在问题的顶部链接了关于纵横比框的确切文章。 - Donnie D'Amato

显示剩余2条评论

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Marc Bellêtre · Accepted Answer

您可以使用一个宽高比为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。