保持拉伸弹性项目的纵横比

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>

Answer 1

哇，这 是个棘手的问题！但是，是的，我找到了一种在 CSS 中实现它的方法。

正如您所发现的，

aspect-ratio

似乎无法使垂直拉伸的 flex 子节点

<div>

与它的高度一样宽。所以我尝试使用一个小的 1:1

<img>

作为 flex child，希望图像的 固有宽高比 会导致宽度与高度成比例地拉伸。那没有用——它只是垂直拉伸。但是，从

flex

切换到

grid

在那个部门有所帮助。因此，第 1 步在左侧为我们提供了一个方框，它与右侧内容的高度相匹配。这是一个片段来演示。

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