使用CSS时的神秘行为；对象匹配：包含；具有特定高度的flexbox容器内图像的属性

我有一个flexbox容器，我试图在其中显示两个并排放置阴影的图像。我希望他们采取同等数量的水平空间，即使图像大小不同。我正在使用一个样式为“display:flex”的容器，并使用“object-fit:contain”对图像进行缩放。如果我没有给容器指定一个特定的高度，我的代码就可以工作。如果我给容器一个特定的高度，比如300px，图像会缩小，但是阴影会出现在离图像边缘一定距离的地方，就像有一个盒子包裹着它们一样。这似乎很奇怪。有人能解释这种奇怪的行为吗？有没有一种方法可以让容器保持一定的高度，并且仍然可以工作

用小提琴来说明：

html:

---

如果将“高度”设置为“自动”，则会使它们具有相同的宽度，但高度会有所不同。如果希望它们具有相同的高度和宽度，则必须使用具有相同纵横比的图像才能执行此操作，因为如果纵横比不同，则不进行裁剪就无法使其具有相同的宽度和高度。 有一个#FutureCSS属性叫做

纵横比：16/9中，您可以将元素锁定到特定的比率，但它是

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

使用
object-fit:cover
insteadrelated:应该提到我想要保持真实图像的纵横比。
 <div class="container">
    <img class="image" src="http://via.placeholder.com/300x400" />   
    <img class="image" src="http://via.placeholder.com/400x300" />
  </div>

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

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

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