'你好 Stackoverflow!
我想知道是否有人可以帮我解决这个问题。 我找到了 this Jason Mayes 的前/后图像查看器和我正在努力让它以响应方式居中。
所以我找到了“object-fit: cover;”和“对象位置:50% 50%;”工作得很好,但我很快意识到过渡本身并没有以某种方式设计。
我把Jason的笔 fork 给大家看的更清楚: 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;
}
提前致谢!
最佳答案
对这些对象属性的支持不是很好。我会尝试在 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')" />
关于html - 过渡中的图像未样式化以适合对象 : cover;,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/32208778/