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

Question

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

Fiddle来说明：https://jsfiddle.net/Lej1a6vp/

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;
}

Answer 1

如果您将高度设置为自动，它会使它们的宽度相同但高度会不同，如果您希望它们具有相同的高度和宽度，则必须使用具有相同纵横比的图像这是可行的，因为如果宽高比不同，则不可能在不裁剪的情况下使其具有相同的宽度和高度。有一个名为 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;
}

Answer 2

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

.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;
}

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

Mysterious behavior when using CSS "object-fit:contain" property on images inside a flexbox container having a specific height

css

flexbox

object-fit

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