web-dev-qa-db-ja.com

CSSによる画像スケーリング：-moz-crisp-edgesの代替Webkitはありますか？

ピクセルが100x100の画像があります。サイズを2倍にしたいので、200x200で、サーバーではなく（明示的に）CSSで表示したいと思います。

数年以来、画像はピクセル単位のスケールではなく、すべてのブラウザでアンチエイリアス処理されます。

Mozillaはアルゴリズムを指定できます：image-rendering：-moz-crisp-edges; IEも同様です。-ms-interpolation-mode：最近傍;

既知のWebkitの代替手段はありますか？

cssimagefirefoxwebkitscaling
39
Martin Kool

残念ながら、この機能はWebKitにはないようです。この最近のバグレポートをご覧ください：

https://bugs.webkit.org/show_bug.cgi?id=40881

15
VoteyDisciple

WebKitはCSSディレクティブをサポートするようになりました：

image-rendering:-webkit-optimize-contrast;

Chromeとこのページの最後の画像を使用して、実際に動作することを確認できます。
http://phrogz.net/tmp/canvas_image_zoom.html

そのページで使用されるルールは次のとおりです。

.pixelated {
  image-rendering:optimizeSpeed;             /* Legal fallback */
  image-rendering:-moz-crisp-edges;          /* Firefox        */
  image-rendering:-o-crisp-edges;            /* Opera          */
  image-rendering:-webkit-optimize-contrast; /* Safari         */
  image-rendering:optimize-contrast;         /* CSS3 Proposed  */
  image-rendering:crisp-edges;               /* CSS4 Proposed  */
  image-rendering:pixelated;                 /* CSS4 Proposed  */
  -ms-interpolation-mode:nearest-neighbor;   /* IE8+           */
}
87
Phrogz

@Phrogzに非常に役立つ答えに加えて、これを読んだ後： https://developer.mozilla.org/en-US/docs/CSS/image-rendering

最適なCSSは次のように思われます。

image-rendering:optimizeSpeed;              /* Legal fallback                 */
image-rendering:-moz-crisp-edges;           /* Firefox                        */
image-rendering:-o-crisp-edges;             /* Opera                          */
image-rendering:-webkit-optimize-contrast;  /* Chrome (and eventually Safari) */
image-rendering:crisp-edges;                /* CSS3 Proposed                  */
-ms-interpolation-mode:bicubic;             /* IE8+                           */
2
Dominic