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

Posted 2023-03-05

【中文标题】Flexbox 图像在浏览器中的大小调整不同

【英文标题】：Flexbox image resizes differently in browsers

【发布时间】：2019-11-18 21:11:03

【问题描述】：

我需要一张图片来填充一个 div。根据this answer，这项工作几乎完成了。 当图像比它们所包含的 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%;

<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 和其他浏览器中打开它并比较结果。

【参考方案1】：

您可以尝试将object-fit:cover 用于支持的浏览器

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

【讨论】：

谢谢，这似乎可以解决问题！唯一需要注意的是，如果我想使用align-items: flex-start | flex-end。在这种情况下，object-fit: cover 将覆盖它并将包含的图像垂直居中。有没有办法解决这个问题？

您可以在.item 上使用object-position。使用50% 0% 模拟align-items: flex-start 和50% 100% 为flex-end