23

画像を視覚的に拡大縮小すると、Firefox 3 で画像がぼやけます。Firefox 2 やその他のブラウザーはそうではありません。これは私が期待する動作です。これは、png または gif スプライトを使用して Web ベースのゲームを作成する場合に特に不十分です。

たとえば、Firefox 3 で 100x100 の画像を次のように表示する場合:

<img src="sprite.gif" width="200" />

また

<img src="sprite.gif" style="width:200px; height:200px;" />

IEではなく、FF3でぼやけて見えます。

これを防ぐ方法についてのアイデアはありますか？

4

9 に答える 9

36

FireFox の次の新機能を発見しました。

http://developer.mozilla.org/En/CSS/Image-rendering

したがって、これを CSS に入れると修正されます。

image-rendering: -moz-crisp-edges;

この情報をシェアしようと思いました。自分の質問に答えてすみません;）

于 2009-04-20T10:15:45.103 に答える
5

私はこれについて自分で疑問に思っていましたが、ff3 でハードコードされているようです :( http://forums.mozillazine.org/viewtopic.php?f=7&t=752735&p=5008845

ff2 は補間を行いませんでした

IE はデフォルトではありませんが、有効にすることができます: http://www.joelonsoftware.com/items/2008/12/22.html

于 2008-12-23T12:07:56.043 に答える
4

画像を元のサイズから拡大しています-通常、望ましい効果はスムーズなスケーリングであり、FFX3がこれを開始したように見えます（バイリニアフィルタリングを想定しています）。Safari と Opera を見ると、画像のフィルタリングも行われていることがわかると思います。

于 2008-12-23T09:39:42.067 に答える
2

また、Internet Explorer 8 は、画像を拡大縮小するときに、デフォルトで画像を「ぼかし」ます。これは実際には良いことです。ほとんどの画像は、最近隣サンプリングではなくバイキュービック サンプリングを使用してスケーリングすると、見栄えが良くなります。

以前のバージョンと同じように Internet Explorer 8 で画像をスケーリングする場合は、CSS に次のように記述します。

-ms-interpolation-mode: nearest-neighbor;

Internet Explorer 7 で IE 8 のように画像をスケーリングするには、次のようにします。

-ms-interpolation-mode: bicubic;

画像の見た目だけでなく、パフォーマンスも考慮する必要があります。バイキュービック サンプリングを使用する場合、IE 7 と IE 8 は Firefox 3.6 よりもはるかに多くの CPU パワーを必要とすることがわかりました。

于 2010-07-04T04:58:18.160 に答える
2

http://developer.mozilla.org/En/CSS/Image-renderingは、Firefox の現在のトランク ビルド (Minefield/3.6a1pre/Gecko 1.9.2) にのみ適用されます。この機能は Firefox 3.0 にはなく、次の 3.5 リリースにもありません。そのオプションを備えた最初のリリースは、3.5 の次のメジャー リリースであり、現在は計画の初期段階にあり、2010 年にリリースされる予定です。

于 2009-04-20T10:32:16.890 に答える
1

画像をスケーリングするときに補間を使用するため、実際にはFFの方法を好みます。ほとんどの場合、これにより画像がIEよりもはるかに見栄えが良くなります。ただし、スプライトを使用する場合など、うまくいかない場合もあると思います。

私はそれを回避する方法はないと思います。

于 2008-12-23T09:40:44.327 に答える
1

表示されると予想される最大サイズでスプライトを作成し、必要に応じて縮小すると、より良い結果が得られるのではないでしょうか?

于 2009-05-12T09:13:14.183 に答える
0

クライアント側で画像をスケーリングすることは避けてください。画像を上にスケーリングすることは、ズームのようなものです。ブラウザーには、画像を実際よりも高い解像度で表示するための情報がないため、画像をぼかすことなくそれを行うことはできません.IEでは気付かないかもしれません.試してみてください. 200px を 400px に変更します。

于 2008-12-23T09:41:58.710 に答える