MDN may have intermittent access issues April 18 13:00 - April 19 01:00 UTC. See whistlepig.mozilla.org for all notifications.

mozilla
Ihre Suchergebnisse

    image-rendering

    Diese Übersetzung ist unvollständig. Bitte helfen Sie, diesen Artikel aus dem Englischen zu übersetzen.

    Dies ist eine experimentelle Technologie
    Da diese Technologie noch nicht definitiv implementiert wurde, sollte die Browser Kompatibilität beachtet werden. Es ist auch möglich, dass der Syntax in einer späteren Spezifikation noch geändert wird.

    Zusammenfassung

    Das image-rendering CSS Property schlägt dem user agent vor, wie er eingebundene Bilder darstellen sollte. Dieses Property gillt für alle Bilder welche einem HTML untergeordnet sind, betrifft allerdings nur skalierte Bilder.  Wenn ein Bild zum Beispiel 100x1000px groß ist, es aber mit einer Größe von 200x200px eingebunden wird, so Rechnet der Browser nach dem durch das Property festgelegten Algorythmus um.

    • Initialwert auto
    • Anwendbar auf Alle Elemente
    • Vererbt Ja
    • Prozentwerte
    • Medium visuell
    • Berechneter Wert siehe Spezifikation
    • Animierbar Nein
    • Kanonische Reihenfolge die einzige nicht missverständliche Reihenfolge definiert durch die formale Grammatik

    Syntax

    Formal syntax: auto | crisp-edges | pixelated
    image-rendering: auto
    image-rendering: crisp-edges
    image-rendering: pixelated
    
    image-rendering: inherit
    

    Values

    auto
    Default value, the image should be scaled with an algorithm that maximizes the appearance of the image. In particular, scaling algorithms that "smooth" colors are acceptable, such as bilinear interpolation. This is intended for images such as photos. Since version 1.9 (Firefox 3.0), Gecko uses bilinear resampling (high quality).
    crisp-edges
    The image must be scaled with an algorithm that preserves contrast and edges in the image, and which does not smooth colors or introduce blur to the image in the process. This is intended for images such as pixel art.
    pixelated
    When scaling the image up, the "nearest neighbor" or similar algorithm must be used, so that the image appears to be composed of large pixels. When scaling down, this is the same as 'auto'.
    The values optimizeQuality and optimizeSpeed present in early draft (and coming from its SVG counterpart) are defined as synonyms for the auto value.

    Examples

    /* applies to GIF and PNG images; avoids blurry edges */
    
    img[src$=".gif"], img[src$=".png"] {
                       image-rendering: -moz-crisp-edges;         /* Firefox */
                       image-rendering:   -o-crisp-edges;         /* Opera */
                       image-rendering: -webkit-optimize-contrast;/* Webkit (non-standard naming) */
                       image-rendering: crisp-edges;
                       -ms-interpolation-mode: nearest-neighbor;  /* IE (non-standard property) */
                     }
    
    
    div { 
            background: url(chessboard.gif) no-repeat 50% 50%;
            image-rendering: -moz-crisp-edges;         /* Firefox */
            image-rendering:   -o-crisp-edges;         /* Opera */
            image-rendering: -webkit-optimize-contrast;/* Webkit (non-standard naming) */
            image-rendering: crisp-edges;
            -ms-interpolation-mode: nearest-neighbor;  /* IE (non-standard property) */
    }

    Live Examples

    image-rendering: auto;

    78% squares.gif 100% squares.gif 138% squares.gif downsized hut.jpg upsized blumen.jpg

    image-rendering: pixelated; (-ms-interpolation-mode: nearest-neighbor)

    78% squares.gif 100% squares.gif 138% squares.gif downsized hut.jpg upsized blumen.jpg

    image-rendering: crisp-edges; (-webkit-optimize-contrast)

    78% squares.gif 100% squares.gif 138% squares.gif downsized hut.jpg upsized blumen.jpg

    Specifications

    Specification Status Comment
    CSS Image Values and Replaced Content Module Level 3
    Die Definition von 'image-rendering' in dieser Spezifikation.
    Anwärter Empfehlung  

    Though initially close from the SVG image-rendering property, the values are quite different now.

    Browser compatibility

    Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
    Basic support (auto) (Ja) 3.6 (1.9.2) Nicht unterstützt[1] 11.60 6533.21.1, r86920
    crisp-edges Nicht unterstützt 3.6 (1.9.2)-moz Nicht unterstützt 11.60-o 6533.21.1, r86920 with the non-standard name -webkit-optimize-contrast
    pixelated 41.0 Nicht unterstützt (bug 856337) Nicht unterstützt 26.0 Nicht unterstützt
    optimizeQualityoptimizeSpeed Nicht unterstützt 3.6 (1.9.2) Nicht unterstützt 11.60 6533.21.1, r86920
    Feature Android Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile
    Basic support 41.0 ? ? ? ?

    Notes

    [1] Internet Explorer 7 and 8 supports the non-standard -ms-interpolation-mode property with two values (bicubic and nearest-neighbor):

    • applies only to images (JPG, GIF, PNG, ...)
    • in IE7 only for images without transparency
    • does not inherit
    • default value IE7: nearest-neighbor (low quality)
    • default value IE8: bicubic (high quality)
    • obsolete as of IE9

     

    Canvas can provide a fallback solution for crisp-edge/optimize-contrast through manual imageData manipulation.

    Schlagwörter des Dokuments und Mitwirkende

    Schlagwörter: 
    Mitwirkende an dieser Seite: Sheppy, robinboening, vale981
    Zuletzt aktualisiert von: Sheppy,