html - 容器的图像 100% 高度 - 最小高度在 Chrome/Safari 上的行为不同

Question

我希望图像填充其容器的高度，然后使用 object-fit: cover 来处理纵横比。在 Chrome 中，这达到了预期的效果。但是，在 Safari 中，包含的 div 现在非常高。

http://codepen.io/anon/pen/GjzPvN

为什么 Chrome 和 Safari 之间存在差异？哪一个是正确的，如果 Safari 是正确的，是否有更好的方法来实现这一点，最好不使用 position: absolute？

Answer 1

Safari 正确执行此操作，因为 Chrome 对 min-height 的支持错误。如果你需要一致性，你必须使用vh，这样:

img {
  width: 100%;
  min-height: 100vh;
  object-fit: cover;
}