image-rendering#

#Introduce

image-rendering

Used to set the image scaling algorithm. Currently only works with <image> and background-image Currently it only applies to the element itself and will not take effect on child elements.

The image will be scaled when the dimensions specified by the front end are not the original dimensions of the image. For example, if there is an image with a physical pixel size of 100×100, but the actual width and height dimensions are set to 200×200px (or 50×50px), then the image will be reduced or reduced according to the algorithm specified by image-rendering. Enlarge to new size. This property has no effect on unscaled images.

#Examples

css-apisrc/image-rendering/App.tsx

Preview

#Syntax

image-rendering: auto;
image-rendering: crisp-edges;
image-rendering: pixelated;

#Values

#auto

Default value, platform layer default setting. Generally implemented as bilinear interpolation

#crisp-edges

The image must be scaled using an algorithm that effectively preserves contrast and edges in the image, and that does not smooth the colors or introduce blur into the image during processing. This attribute value is suitable for pixel art works, such as images in some web games. This is designed for pixel games (refer to Pixel-art scaling algorithms), and is not implemented by mainstream browsers. Currently, lynx does not support it, and the effect is the same as auto.

#pixelated

When zooming in and out of an image, the nearest neighbor algorithm is used, so the image appears to be made up of large blocks of pixels.

#Formal definition

#Formal syntax

image-rendering = auto | crisp-edges | pixelated

#The difference from the web

1. Only takes effect on the element itself, not on child elements.
2. Global attribute values ​​such as inherit, unset, etc. are not supported.

#Compatibility

LCD tables only load in the browser