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

Question

我有一张类似的卡片。它的右侧是可变宽度/高度的内容，左侧是图像。我希望图像垂直拉伸，占据卡片中的所有垂直空间，并保持纵横比为 1/1（因此基本上使其宽度与其高度相匹配）。

如果不编写脚本，这可能吗？

我希望新的aspect-ratioCSS 属性能派上用场，但如果没有明确的宽度/高度，它似乎不会产生任何效果，并且将高度设置为 100% 最终会降低高度以达到 1/1 宽高比-ratio，而不是增加宽度。

#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

哇，这是一个棘手的问题！但是，是的，我\xe2\x80\x99已经找到了一种在CSS中做到这一点的方法。

\n

正如您所发现的，aspect-ratio\xe2\x80\x99t 似乎无法使垂直拉伸的 Flex 子项的<div>宽度和高度一样。因此，我尝试使用较小的 1:1<img> 作为 flex child，希望图像的固有纵横比会导致宽度与高度成比例拉伸。\xe2\x80\x99 不起作用 \xe2\x80\x94 它只能垂直拉伸。然而，从 切换flex到grid转变对该部门有所帮助。因此，第 1 步让我们在左侧得到一个方框，它与右侧内容的高度相匹配。这是一个要演示的片段。

\n

\r\n

\r\n

.card {\n  background: lightgray;\n  display: inline-grid;\n  grid-template-columns: auto auto;\n  gap: 1em;\n  border: 1px solid #aaa;\n  box-shadow: 0 0 1em rgb(0,0,0,0.3);\n  margin: 2em;\n}\n\n.intrinsic-1x1 {\n  align-self: stretch;\n}\n\n.content {\n  font-size: 1.5em;\n}

\r\n

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

\r\n

\r\n

\r\n

\n

最后，我们将 a 绝对定位<div>在该正方形空间 \xe2\x80\x94 上height: 100%;，并结合aspect-ratio: 1/1;此场景中的工作。那么\xe2\x80\x99s只需要把我们想要的东西放进<img>去并使用object-fit: cover;缩放和裁剪它到空间即可。

\n

\r\n

\r\n

.container {\n  background: lightgray;\n  display: inline-grid;\n  grid-template-columns: auto auto;\n  gap: 1em;\n  border: 1px solid #aaa;\n  box-shadow: 0 0 1em rgb(0,0,0,0.3);\n  margin: 2em;\n  position: relative;\n}\n\n.intrinsic-1x1 {\n  align-self: stretch;\n  opacity: 0;\n}\n\n.content {\n  font-size: 1.5em;\n}\n\n.overlay {\n  position: absolute;\n  left: 0;\n  top: 0;\n  height: 100%;\n  aspect-ratio: 1/1;\n}\n\n.overlay img {\n  height: 100%;\n  width: 100%;\n  object-fit: cover;\n}

\r\n

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

\r\n

\r\n

\r\n

\n