0

我有一个容器元素（屏幕截图上的巧克力色），其中包含一个 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 将完美契合。在现实世界中，图像内容不会固定 w/h 比例）：

在此处输入图像描述

4

1 回答 1

0

这是你所期望的吗？关键是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>

于 2022-02-12T11:17:28.473 回答