对具有特定高度的 flexbox 容器内的图像使用 CSS“object-fit:contain”属性时的神秘行为

如何解决对具有特定高度的 flexbox 容器内的图像使用 CSS“object-fit:contain”属性时的神秘行为

我有一个 flexBox 容器，我试图在其中并排显示两个带有阴影的图像。即使图像大小不同，我也希望它们占用等量的水平空间。我正在使用样式为“display：flex”的容器，并使用“object-fit：contain”来使图像缩放。如果我不给容器一个特定的高度，我的代码就可以工作。如果我给容器一个特定的高度，例如 300 像素，图像会缩小，但阴影出现在离图像边缘一定距离的地方，就好像有一个盒子包裹着它们。这似乎是奇怪的行为。任何人都可以解释这种看起来很奇怪的行为，有没有办法可以给容器一个高度并让它继续工作？

小提琴说明：does compile

html：

 <div class="container">
    <img class="image" src="http://via.placeholder.com/300x400" />   
    <img class="image" src="http://via.placeholder.com/400x300" />
  </div>

CSS：

.container {
  display: flex;
  margin: 1em auto 3em auto;
  width: 500px;
  height: 200px;
  justify-content: center;
  align-items: center;
}
img {
  Box-shadow: 8px -8px 10px #00000080;
  height: 100%;
  width: 40%;
  margin-left: 1em;
  object-fit: contain;
}

解决方法

如果您将高度设置为自动，它将使它们具有相同的宽度但高度会不同，如果您希望它们具有相同的高度和宽度，那么您必须使用具有相同纵横比的图像来实现工作，因为如果纵横比不同，则不可能在不裁剪的情况下使其宽度和高度相同。 有一个名为 aspect-ratio: 16 / 9; 的 #FutureCSS 属性，您可以在其中将元素锁定到特定比例，但它是 still not available in all browsers;

    .container {
  display: flex;
  margin: 1em auto 3em auto;
  width: 500px;
  height: auto;
  justify-content: center;
  align-items: center;
}


img {
  box-shadow: 8px -8px 10px #00000080;
  height: auto;
  width: 50%;
  margin-left: 1em;
  object-fit: contain;
}

,

BDB88 为我提供了我需要的线索，谢谢。我的目标是制作一个响应式布局，显示图像周围的阴影，而不是远处的一些幽灵般的轮廓，我想保持图像的纵横比。我还想为容器指定一个特定的高度，并且不要让图像溢出到容器之外。我对“高度：100%；”的使用因为 img 标签是导致问题的原因。结合“宽度：40%;”导致冲突，因为这两个要求不能总是同时得到满足。通过更改为“最大高度：100%；”和“最大宽度：40%；”对于 img 标签，我得到了我所追求的行为。 CSS 现在是（我做了一些额外的编辑，以便在查看和缩放窗口以模拟更大/更小的屏幕尺寸时使行为更加明显）：

.container {
  background: yellow;
  display: flex;
  margin: 1em auto 3em auto;
  width: auto;
  height: 200px;
  justify-content: center;
  align-items: center;
}
img {
  box-shadow: 8px -8px 10px #00000080;
  max-width: 40%;
  max-height: 100%;
  margin-left: 1em;
  object-fit: contain;
}