Question

＆＃39; Ello Stackoverflow！

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

所以我发现＆＃34;对象适合：封面;＆＃34;和＆＃34;对象位置：50％50％;＆＃34;工作得很好，但我很快就意识到过渡本身并没有那种风格，不知何故。

我把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

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

{{1}}

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

Answer 2

已知对象拟合会破坏转换。我建议使用另一种重新定位图像的方法 - 例如使用CSS转换属性：

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

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

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

2 个答案: