转换中的图像没有造型到物体贴合:封面;

Question

'Ello Stackoverflow!

我想知道是否有人可以帮我解决这个问题.我发现Jason Mayes的这个前/后图像查看器,我正在努力让它成为响应中心.

所以我发现"物体贴合:覆盖;" 和"物体位置: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