适合父级并保持纵横比的 Div

Question

我有一个div保持纵横比的元素：它根据其宽度（使用填充技巧）计算其高度。我想要做的是div通过适应最大可用空间，垂直和水平，不裁剪，将其放入另一个。我认为最接近我想要的东西是object-fit: contain- 这img只是。

我希望 div 在保持纵横比的同时覆盖可能的最大高度和宽度。没有垂直或水平裁剪。

甚至可以仅使用 CSS 吗？如果是这样，如何？

更新：一篇很好的文章，目前的情况。

代码（可以是任何其他解决方案，不必基于此代码段构建）：

html,
body {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
}

.container {
  position: relative;
  width: 100%;
}

.container:before {
  content: "";
  display: block;
  width: 50%;
  padding-top: 50%;
}

.embed {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: red;
}

<div class="container">
  <div class="embed">
    this should accommodate all the available space and maintain aspect ratio, no crop when width is too wide
  </div>
</div>

Answer 1

overflow:hiddenChromium 88、Firefox 87和Safari Technology Preview 118上的纵横比是您的朋友。

2023 年 1 月更新：

现在您还需要一个@container (aspect-ratio > X)容器查询。Firefox v110.0b2、Safari 和 Chromium 均通过。

我更新了下面的代码，以及jsitor 上的演示。

html,
body {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
}

.container {
  container-type: size;
  container-name: resize-box;
  display: grid;
  resize: both;
  overflow: hidden;
  border: black 2px solid;
  min-width: 50px;
  min-height: 50px;
  width: 150px;
}

.embed {
  width: 100%;
  aspect-ratio: 1/1;
  object-fit: contain;
  overflow: hidden;
  border: 2px red solid;
  box-sizing: border-box;
  display: flex;
  margin: auto;
}

@container resize-box (aspect-ratio > 1/1) {
  .embed {
    width: auto;
    height: 100%;
  }
}

.embed > div {
  margin: auto;
}

<div class="container">
  <div class="embed">
    <div>1:1</div>
  </div>
</div>

Answer 2

好吧，看来只靠CSS是解决不了的。如果有人感兴趣，我已经整理了一个可以完成这项工作的React 组件（当我有时间时，很快就会进行测试和更好的自述文件）。

它将其子级包装到 a 中div，并使用 JavaScript 计算该 div 的宽度和高度，以便在保持给定宽高比的同时容纳可用空间。它基本上会拉伸包装纸，直到其中一侧达到最大程度。

重大更新已找到仅 CSS 的解决方案！