Question

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

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

Answer 1

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

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

Answer 2

由于其browser support

，我不会使用1234来执行您需要的操作

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

object-fit:

你的css：

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

这是我的CodePen example。

请注意，如果您希望获得与CodePen完全相同的结果，则应将/* 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); }更改为background-size，但如果您希望图片保持其宽高比，则应考虑使用{{ 1}}或100% 100%。详细了解cover and contain here

之间的差异

Answer 3

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

示例：

.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

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

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

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

图像容器的100％高度 - 最小高度在Chrome / Safari上的表现不同

4 个答案: