Html Flexbox图像在浏览器中的大小不同

我需要一张图片来填充一个分区。根据，工作几乎完成了。 当图像比包含它们的div稍大时，问题就会出现。图像以100%的比例显示，这在我的例子中并不理想

在Firefox中，可以使用以下CSS来解决此问题：

.fill img {
  min-height: 100%;
}

在其他浏览器（使用Chrome和Edge测试）中，此解决方案不起作用，最终结果与以前相同

有没有一种方法可以在其他浏览器中实现与Firefox相同的结果

下面是一个摆弄模型布局的小摆设，展示了这种行为：

.container{
边框：2倍纯红；
宽度：300px；
高度：40vh；
保证金：5px；
显示器：flex；
证明内容：中心；
对齐项目：居中；
溢出：隐藏；
}
.项目{
最小高度：100%；
}

---

您可以尝试为支持的浏览器使用

对象匹配：cover

.container{
边框：2倍纯红；
宽度：300px；
高度：40vh；
保证金：5px；
显示器：flex；
证明内容：中心；
对齐项目：居中；
溢出：隐藏；
}
.项目{
身高：100%；
宽度：100%；
对象匹配：覆盖；
}

---

您可以尝试为支持的浏览器使用

对象匹配：cover

.container{
边框：2倍纯红；
宽度：300px；
高度：40vh；
保证金：5px；
显示器：flex；
证明内容：中心；
对齐项目：居中；
溢出：隐藏；
}
.项目{
身高：100%；
宽度：100%；
对象匹配：覆盖；
}

谢谢，这似乎很管用！唯一需要注意的是，如果我想使用

align items:flex start | flex end

。在这种情况下，

object-fit:cover

将覆盖它并垂直居中包含图像。有办法解决这个问题吗？您可以在

.item

上使用

对象位置

。使用

50%0%

模拟

align items:flex start

和

50%100%

用于

flex end

谢谢，这似乎很有效！唯一需要注意的是，如果我想使用

align items:flex start | flex end

。在这种情况下，

object-fit:cover

将覆盖它并垂直居中包含图像。有办法解决这个问题吗？您可以在

.item

上使用

对象位置

。使用

50%0%

模拟

align items:flex start

和

50%100%

用于

flex end