From 4b1a9203c547c019fc5398082ae19a3f3d4c3efe Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:41:15 -0500 Subject: initial commit --- files/de/web/css/image-rendering/index.html | 114 ++++++++++++++++++++++++++++ 1 file changed, 114 insertions(+) create mode 100644 files/de/web/css/image-rendering/index.html (limited to 'files/de/web/css/image-rendering/index.html') diff --git a/files/de/web/css/image-rendering/index.html b/files/de/web/css/image-rendering/index.html new file mode 100644 index 0000000000..3abab150d4 --- /dev/null +++ b/files/de/web/css/image-rendering/index.html @@ -0,0 +1,114 @@ +--- +title: image-rendering +slug: Web/CSS/image-rendering +tags: + - CSS + - CSS Bild + - CSS Eigenschaft + - Experimentell + - NeedsMobileBrowserCompatibility + - Referenz + - SVG +translation_of: Web/CSS/image-rendering +--- +
+
{{CSSRef}}
+ +
{{SeeCompatTable}}
+ +

Zusammenfassung

+ +

Das image-rendering CSS Property schlägt dem user agent vor, wie er eingebundene Bilder darstellen sollte. Dieses Property gilt 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.

+ +

{{cssinfo}}

+ +

Syntax

+ +
{{csssyntax}}
+ +
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

+ + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('CSS3 Images', '#the-image-rendering', 'image-rendering')}}{{Spec2('CSS3 Images')}} 
+ +

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

+ +

Browser compatibility

+{{Compat("css.properties.image-rendering")}}
-- cgit v1.2.3-54-g00ecf