保持拉伸的 flex 项目的纵横比

Question

我有一张类似卡片的东西。它的右侧是可变宽度/高度的内容，左侧是一张图片。我希望该图片在垂直方向上被拉伸，占据卡片中的所有垂直空间，并保持1:1的宽高比（基本上是将其宽度与高度匹配）。

是否可以在不使用脚本的情况下实现这一点？

我原本希望使用新的aspect-ratio CSS属性，但似乎如果没有显式设置宽度/高度，它就不会产生任何效果。而将高度设置为100%最终会减小高度以达到1:1的宽高比，而不是增加宽度。

#container {
  background: lightgray;
  display: flex;
  justify-content: center;
  align-items: center;
}

#object {
  background: pink;
  aspect-ratio: 1/1;
  overflow: hidden;
  align-self:stretch;
}

#control {
  font-size:1.5em;
}

<div id="container" class="resizable">
  <div id="object"> 
    maintain 1/1
  </div>
  <div id="control">
    <div>Content</div>
    <div>Content</div>
    <div>Content</div>
    <div>Content</div>
    <div>Content</div>
    <div>Content</div>
    <div>Content</div>
    <div>Content</div>
  </div>
</div>

- noob0909

Answer 1

哇，这个确实有点棘手！但是没关系，我已经找到了一种用CSS实现的方法。

正如你发现的那样，aspect-ratio似乎不能让一个垂直拉伸的flex子元素<div>与其高度相等。所以我尝试使用一个小的1:1 <img>作为flex子元素，希望图像的固有宽高比会导致宽度与高度成比例地拉伸。但这并没有起作用——它只在垂直方向上拉伸。然而，从flex切换到grid在这方面有所帮助。因此，第一步让我们在左侧得到一个与右侧内容高度相匹配的正方形框。以下是一个演示片段。

.card {
  background: lightgray;
  display: inline-grid;
  grid-template-columns: auto auto;
  gap: 1em;
  border: 1px solid #aaa;
  box-shadow: 0 0 1em rgb(0,0,0,0.3);
  margin: 2em;
}

.intrinsic-1x1 {
  align-self: stretch;
}

.content {
  font-size: 1.5em;
}

<div class="card">
  <img class="intrinsic-1x1" src="https://donald.net.au/bugs/1x1-tiny.png">
  <div class="content">
    <div>Content</div>
    <div>Content</div>
    <div>Content</div>
  </div>
</div>

<div class="card">
  <img class="intrinsic-1x1" src="https://donald.net.au/bugs/1x1-tiny.png">
  <div class="content">
    <div>Content</div>
    <div>Content</div>
    <div>Content</div>
    <div>Content</div>
    <div>Content</div>
    <div>Content</div>
  </div>
</div>

最后，我们要做的是绝对定位一个 <div> 在那个正方形空间上 - 在这种情况下，height: 100%; 结合 aspect-ratio: 1/1; 可以起作用。然后只需要把我们想要的 <img> 放在里面，并使用 object-fit: cover; 来缩放和裁剪它以适应该空间。

.container {
  background: lightgray;
  display: inline-grid;
  grid-template-columns: auto auto;
  gap: 1em;
  border: 1px solid #aaa;
  box-shadow: 0 0 1em rgb(0,0,0,0.3);
  margin: 2em;
  position: relative;
}

.intrinsic-1x1 {
  align-self: stretch;
  opacity: 0;
}

.content {
  font-size: 1.5em;
}

.overlay {
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  aspect-ratio: 1/1;
}

.overlay img {
  height: 100%;
  width: 100%;
  object-fit: cover;
}

<div class="container">
  <img class="intrinsic-1x1" src="https://donald.net.au/bugs/1x1-tiny.png">
  <div class="content">
    <div>Content</div>
    <div>Content</div>
    <div>Content</div>
  </div>
  <div class="overlay">
    <img src="https://www.celebritycruises.com/blog/content/uploads/2022/01/most-beautiful-mountains-in-the-world-kirkjufell-iceland-1024x580.jpg">
  </div>
</div>

<div class="container">
  <img class="intrinsic-1x1" src="https://donald.net.au/bugs/1x1-tiny.png">
  <div class="content">
    <div>Content</div>
    <div>Content</div>
    <div>Content</div>
    <div>Content</div>
    <div>Content</div>
    <div>Content</div>
  </div>
  <div class="overlay">
    <img src="https://www.celebritycruises.com/blog/content/uploads/2022/01/most-beautiful-mountains-in-the-world-kirkjufell-iceland-1024x580.jpg">
  </div>
</div>

- Brett Donald