11

gifにアニメーションを配置しようとしてjpgいますが、ほとんどのブラウザー (IE、Firefox、iPhone、iPad) で動作するようですが、windowsのchrome 、mac の firefox、およびchromegifの chrome のアニメーションの周りに奇妙なボックスがあります。マック用。

最終的に、画像のサイズを 99.9% に強制的に変更したり、マスクを使用してアニメーション 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/

4

2 に答える 2

7

これは画像のエッジのスケーリングの問題です。そのような場合に使用する解決策は次のとおりです。

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

これにより、画像をスケーリングするときにぼやけたエッジが無効になります。 http://jsfiddle.net/GyDCx/31/

于 2013-05-24T12:48:19.553 に答える