使用 Flexbox 和 object-fit 时出现 Box-shadow 问题

Question

我想要一个充满整个屏幕的容器。里面是与中心对齐的图像。该图像没有任何特定尺寸。我使用过渡效果来显示从中心出现的图像（当通过更改类加载时）。

我的第一个想法是使用 Flexbox 来完成这项任务。它基本上按其应有的方式工作。图像有时会被压扁（取决于图像大小），所以我使用

object-fit: scale-down

。这在一定程度上是有效的，除了

box-shadow

会导致问题。当我更改视口的比例并且图像缩小时，阴影保持不变（开发人员工具中的图像大小似乎也是错误的）。

如何解决这个问题？

这是我所拥有的简化示例：

body {
  margin: 0;
}

.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="https://via.placeholder.com/500x300" />
</div>

Answer 1

7年后，也许你可以尝试删除绝对位置，并将包含框的高度和宽度设置为100垂直宽度和100垂直高度。 像这样，这是否给出了您正在寻找的结果？

body {
  margin: 0;
}

.box {
  width: 100vw;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: lawngreen;
}

img {
  box-shadow: 0 0 5px black;
}

<div class="box">
  <img src="https://via.placeholder.com/500x300" />
</div>