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

Question

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

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

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

Answer 1

如果有人在使用可变高度包装器和 Safari 时遇到此问题，这似乎对我有用：

.imgContainer {
  width: 50%;
  max-height: 100%; // for safari
}

.imgContainer > img {
  object-fit: cover;
  min-height: 100%; // for safari
}

Answer 2

由于 Chrome 对 min-height 的错误支持，Safari 正确地做到了这一点。 如果需要一致性，必须使用vh，这样：

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

Answer 3

Chrome 似乎是根据最高图像计算行高的。 Safari 不会根据图像计算行高。 即使您设置了固定的列高，Safari 9.x 和 Chrome 的行为也不相同。左边的 img 在 Safari 中显示在其容器之外。为了使浏览器的行为相同，我必须设置一个高度并隐藏溢出-y。

例子：

.columns {
  padding-left: .9375rem;
  padding-right: .9375rem;
  min-width: initial;
  background: blue;
  height: 405 px;
  overflow-y: hidden;
}

而不是溢出隐藏。你可以试试：

.columns {
  padding-left: .9375rem;
  padding-right: .9375rem;
  min-width: initial;
  background: blue;
  height: 405px;
}
img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

也许您可以使用一些 jQuery 根据两个图像中的最高值设置列的高度。或者使用@media 规则设置高度。

Microsoft 浏览器不支持object-fit: - 包括 IE11 和 EDGE。对于不支持object-fit:的浏览器，可以试试object-fit-polyfill

Answer 4

我不会使用object-fit: 来做你需要的事情，因为它的browser support

为了获得最佳浏览器支持，您可以使用这样的背景图像来代替图像：

.row
  .medium-8.columns
    a.link#image-1 href="" # I use and id to manage the background image but you could use a class or even inline style (not suggested)

  .medium-4.columns
    a.link#image-2 href=""

还有你的 CSS：

/* I fix the container height to fit the 100% of the page  */
html, body, .row, .row > div {
    height: 100%;
}

/* If you want a fixed height you could add it here and remove the style above. */
[id^="image-"] {
    background-size: cover; /* This could be "cover" or "100% 100%"
    The difference is that the second distor the image to make it fit.*/ 
    background-position: center;
}

#image-2 { background-image: url(http://placehold.it/300x150); }
#image-1 { background-image: url(http://placehold.it/400x300); }

这是我的CodePen example。

请注意，如果您想获得与 CodePen 完全相同的结果，则应将 background-size 更改为 100% 100%，但如果您希望图像保持其纵横比，则应考虑使用 cover 或 @987654331 @。详细了解cover and contain here 之间的区别