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

Question

我需要一张图片来填充分区。根据这个答案，工作几乎完成了。当图像略大于其所包含的div时，就会出现问题。图像以100%的比例显示，这在我的情况下并不理想。

在Firefox中，这个问题可以通过使用以下CSS来解决：

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

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

有没有办法在其他浏览器上实现与Firefox相同的结果？

这是一个摆弄模型布局的摆弄，展示了这种行为：https://jsfiddle.net/jqe5gfru/4/

.container {
  border: 2px solid red;
  width: 300px;
  height: 40vh;
  margin: 5px;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
}

.item {
  min-height: 100%;
}

html lang-html prettyprint-override"><div class="container">
  <img class="item" src="http://placekitten.com/1600/400" />
</div>

<div class="container">
  <img class="item" src="http://placekitten.com/600/1200" />
</div>

尝试在Firefox和其他浏览器中打开它，并比较结果。

Answer 1

您可以尝试为支持的浏览器使用对象适配：覆盖

.container {
  border: 2px solid red;
  width: 300px;
  height: 40vh;
  margin: 5px;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
}

.item {
  height: 100%;
  width: 100%;
  object-fit: cover;
}

<div class="container">
  <img class="item" src="http://placekitten.com/1600/400" />
</div>

<div class="container">
  <img class="item" src="http://placekitten.com/600/1200" />
</div>