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

Question

'你好 Whosebug！

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

所以我发现 "object-fit: cover;" 和 "object-position: 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;
}

提前致谢！

Answer 1

对这些对象属性的支持不是很好。我会尝试在 span 或 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

Answer 2

众所周知，对象匹配会随着转换而中断。我建议使用另一种方法来重新定位图像 - 例如 CSS transform 属性:

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

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

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

Image in transition not styling to object-fit: cover;

html

css

css-transitions