Firefox CSS3对象适配：在转换期间覆盖奇怪的行为 [英] Firefox CSS3 object-fit: cover strange behaviour during transition

问题描述

我在 div 里面有宽度 img >和 height 。我想像 background-size：cover 一样填充整个 div ，这样HTML就是：

I have img inside the div with exact width and height. I would like to place image there like background-size: cover to fill entire div so HTML is:

<div class="cover">
    <img class=active src="http://pixabay.com/static/uploads/photo/2015/02/26/17/56/clock-650753_640.jpg" alt="time">
</div>

CSS是：

.cover {
    width: 400px;
    height: 180px;
    position: relative;
}

.cover img {
    visibility: hidden;
    opacity: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;

    -webkit-transition:visibility 0s linear 4.0s,opacity 2.0s linear 2.0;
    transition:visibility 0s linear 4.0s,opacity 2.0s linear 2.0s;
}

.cover img.active {
    visibility: visible;
    opacity: 1;
}

这里是实例 http://jsfiddle.net/sytwrd9L/1/ - 加载图片2秒后消失。在Firefox 36中，它在转换期间调整 img 的大小，但在其他浏览器中它的效果很好。任何想法如何解决在过渡期间不调整 img 在FF？

Here is live example http://jsfiddle.net/sytwrd9L/1/ - 2 seconds after load the image disappears. In the Firefox 36 it resizes the img during transition but in other browsers it works well. Any idea how to fix not to resize img during transition in FF?

推荐答案

我知道这是一个老问题，但是今天我发现了这个问题的解决方法。我已经在Firefox 44.0中测试过了。

I know this is an old question, but today I found a workaround for this issue. I've tested it in Firefox 44.0 so far.

解决方法：

<!-- Apply the transition to this element -->
<div class="transition">
    <!-- Apply a 3D translate to this element -->
    <div class="translate3d">
        <!-- Apply object-fit to this img elemnt -->
        <img src="path/to/img.jpg" class="object-fit" />
    </div>
</div>

这篇关于Firefox CSS3对象适配：在转换期间覆盖奇怪的行为的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！