html - chrome 中的奇数框

Question

我正在尝试将动画 gif 放在 jpg 上，它似乎适用于大多数浏览器(IE、Firefox、iPhone、iPad)，但是在 windows 上的 chrome、ma​​c 上的 firefox 和 ma​​c 上的 chrome 中，动画 gif 周围是一个奇怪的框>.

我终于通过一些奇怪的 hack 解决了这个问题，比如强制图像大小调整到 99.9%，使用 mask 只允许动画 gif 的一部分显示出来，但是有更好/更干净的跨浏览器解决方案吗？

我基本上是从内部的一个 div 和一个图像开始的，它们都是响应式的。
HTML:

<div>
    <img src="http://www.enjoyillinois.com/images/animations/Garden_of_Gods_anim_full.gif" />
</div>

CSS:

div {
    background-image: url("http://www.enjoyillinois.com/images/animations/Garden_of_Gods_bg.jpg");
    background-repeat: no-repeat;
    background-size: cover;
}

img {
    width:100%;
    display:block;
}

这是一个 jsfiddle:http://jsfiddle.net/GyDCx/7/

Answer 1

这是一个图像边缘缩放问题，我在这种情况下使用的解决方案是:

img{ image-rendering:-webkit-optimize-contrast; }

缩放图像时禁用模糊边缘。 http://jsfiddle.net/GyDCx/31/