图像过渡而不是对象适合的样式：封面；答案

【问题标题】：Image in transition not styling to object-fit: cover;图像过渡而不是对象适合的样式：封面；
【发布时间】：2015-08-26 00:51:42
【问题描述】：

'Ello Stackoverflow！

我想知道是否有人可以帮助我解决这个问题。我找到了 Jason Mayes 的 thisBefore/After 图像查看器，我正在努力让它响应居中。

所以我找到了“object-fit:cover;”和“对象位置：50% 50%；”效果很好，但我很快意识到过渡本身并没有以某种方式设计。

为了更清楚地向您展示，我叉了 Jason 的笔： http://codepen.io/RogerAntonio/pen/rVXrma

我认为问题出在某个地方：

.container img {
  object-fit: cover;
  object-position: 50% 50%;
  overflow: hidden;
}

.beforeAfter .before {
  z-index:2;
  opacity: 1;
  -webkit-transition: opacity 1s ease-in-out;
  -moz-transition: opacity 1s ease-in-out;
  -ms-transition: opacity 1s ease-in-out;
  -o-transition: opacity 1s ease-in-out;
  transition: opacity 1s ease-in-out;
}

提前谢谢你！

【问题讨论】：

标签： html css css-transitions

【解决方案1】：

对这些对象属性的支持不是很好。我会尝试在跨度或 div 上使用内联背景图像，然后设置高度。

<span class="image before" style="background-image:url('http://www.abc.net.au/news/linkableblob/5272894/data/view-of-independence-square-in-kiev-data.jpg')" />
<span class="image after" style="background-image:url('http://www.abc.net.au/news/linkableblob/5272868/data/site-of-anti-government-protest-in-kiev-data.jpg')" />

http://codepen.io/Hexl/pen/waVEKL

【讨论】：

这对我有用！它应该在 IE 上工作（那里不支持对象匹配）。我必须更改一些东西才能始终将信息放在首位，但它确实有效！谢谢！

【解决方案2】：

众所周知，Object-fit 会因转换而中断。我建议使用另一种重新定位图像的方法 - 例如使用 CSS 转换属性：

.container img {
  width: 100%;
  height: auto;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

您需要忽略您的样式，以便其他一些冗余声明不会覆盖定位。您可能需要添加一些供应商前缀才能使其在不同的浏览器中工作。 Slightly modified fiddle here

【讨论】：

谢谢 Erkki，在您减小窗口大小之前它看起来还不错。我将使用亚当的方法，但仍然感谢您的贡献！