具有动态宽度和高度的纵横比，类似于 object-fit 包含

Question

我有一个容器元素（屏幕截图上的巧克力色），它包含一个 3x2 的瓷砖网格。瓷砖包含具有 16/9 分辨率图像和一些页眉和页脚的图像元素。瓷砖的跨度可以是 1-3，中间有 4px 的间隙。 图像设置为 object-fit:contain，容器元素（屏幕截图上的巧克力色）占用父级（灰色）的 100% 宽度和高度，这导致图像平铺比例与图像比例不匹配，并且图像周围有条（图片上的蓝色水色）。 我需要缩放容器元素（巧克力色），所以它的内容会得到这样的尺寸，图像元素会完全适合。

这里是堆栈闪电战。我尝试使用图像父级的纵横比，它适用于中等大小的分辨率，但不适用于小或大，然后图像再次获得水色条。

为简化起见，stackblitz 仅包含一个图像元素图块，它应该完全适合巧克力元素。您可以忽略图像内部的网格。

https://stackblitz.com/edit/angular-ivy-xu92pf?file=src/app/app.component.css

当前（巧克力容器从父容器中获取 100% 的宽度和高度）：

预期（巧克力容器具有宽高比，因此其图像内容 16/9 将完美契合。在现实世界中，图像内容将没有固定的宽高比）：

Answer 1

这是您的预期吗？关键是使用align-items: flex-start; 使.image-container 浮动在其.parent 的顶部。

.parent {
  display: flex;
  align-items: flex-start; /* Keep the child element float to the top */
  width: 330px;
  min-height: 250px;
  background-color: grey;
  padding: 8px;
}

.image-container {
  background-color: chocolate;
  /*aspect-ratio: 16/10, 5;*/
  /*this will be custom calculated from the content of image-container*/
  width: 100%;
  padding: 5px;
}

img {
  height: 100%;
  width: 100%;
  background-color: aqua;
  object-fit: contain;
  display: block; /* to make the image fill up its parent element */
}

<p>#1</p>
<div class="parent">
  <div class="image-container">
    <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/14179/image.png" />
  </div>
</div>

<p>#2</p>

<div class="parent">
  <div class="image-container">
    <img src="https://picsum.photos/200/80" />
  </div>
</div>

<p>#3</p>

<div class="parent">
  <div class="image-container">
    <img src="https://picsum.photos/200/300" />
  </div>
</div>