使用 flex-box 和 object-fit 时的框阴影问题

Question

我想制作一个全屏容器，其图像将自身居中对齐。另外，我不知道图像的大小。我正在使用过渡效果来显示从中心出现的图像（通过更改类加载时）。

我的第一个想法是使用flex-box来完成这项任务。它正在正常工作。Exept 图像不时被压缩（取决于图像大小），所以我使用了object-fit: scale-down。当我决定在图像上使用 box-shadow 时，这很有效。它起作用了，但是当我更改视口的比例并且图像缩小时，框阴影保持不变（开发人员工具中的图像大小也似乎是错误的）。

你能帮我解决这个问题吗？

这是我所拥有的简化示例https://jsfiddle.net/AlexEmashev/xrrgsymx/3/

.box {
  position: absolute;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: lawngreen;
}
img {
  max-height: 100%;
  max-width: 100%;
  min-height: 1px;
  box-shadow: 0 0 5px black;
  object-fit: scale-down;
}

<div class="box">
  <img src="http://placehold.it/500x300" />
</div>