14

首先，让我解释一下我所知道的存在并尝试了以下变化：

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

基于高度的宽度

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

编辑（2019-28-02）：我很抱歉不清楚下一点，但是为了让文本换行，文本所在的区域应该有一个最大宽度。不可否认， Marc Bellêtre 的解决方案在今天非常接近。

这个问题与没有收到任何回复的旧问题非常相似。不同之处在于，在这种情况下，父级没有收到任何明确的高度值。父卡片的高度完全由里面的文字决定。我可以想象，如果这个问题没有收到任何回应/解决方案，这可能没有什么不同，特别是因为这稍微困难一些。但是，从那时起，新技术出现了（即：flexbox/grid），这可能会有所帮助。

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

编辑（2021-28-10）：您会认为 2 年后 CSS 中的一个属性称为aspect-ratio我们现在已经有了解决方案。但事实并非如此。请参阅提供的片段。

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

有时当我加载这段代码时，盒子甚至不是方形的。最大的问题是它根本不尊重height: 100%，但是在调整浏览器或内容的大小之后它将是方形的。更新比率会使盒子意外地变大。

4

1 回答 1

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，我找不到更好的方法来实现这一点。

于 2019-02-26T15:17:29.077 回答