Definición de .image-rendering aplicado en CSS
La propiedad .image-rendering define cómo el navegador debe representar una imagen si se escala hacia arriba o hacia abajo de sus dimensiones originales. Por defecto, cada navegador intentará aplicar alias a esta imagen escalada para evitar la distorsión, pero esto a veces puede ser un problema si queremos que la imagen preserve su forma pixelada original.
Caso de uso de image-rendering
Si quieres utilizar esta propiedad de CSS en tu hoja styles.css, hazlo de esta forma:
img {
image-rendering: auto;
image-rendering: crisp-edges;
image-rendering: pixelated;
/* Safari seems to support, but seems deprecated and does the same thing as the others. */
image-rendering: -webkit-optimize-contrast;
}Otro ejemplo más avanzado de .image-rendering es el siguiente de CODEPEN:
Sintaxis de .image-rendering en CSS
image-rendering: auto|smooth|high-quality|crisp-edges|pixelated|initial|inherit;Valores
| Valor | Descripción | Manifestación |
|---|---|---|
| auto | Deje que el navegador elija el algoritmo de escala. esto es por defecto | |
| suave | Utilice un algoritmo que suavice los colores de la imagen. | |
| alta calidad | Igual que suave, pero con preferencia por escalado de mayor calidad | |
| bordes crujientes | Utilice un algoritmo que conserve el contraste y los bordes de la imagen | |
| pixelado | Si se aumenta la escala de la imagen, se utiliza el algoritmo del vecino más cercano, por lo que la imagen aparecerá como compuesta de píxeles grandes. Si la imagen se reduce, será igual que en automático | |
| inicial | Establece esta propiedad en su valor predeterminado. | |
| heredar | Hereda esta propiedad de su elemento principal. |
Exploradores compatibles con .image-rendering
Los números de la tabla especifican la primera versión del navegador que es completamente compatible con la propiedad.
Los números seguidos de -webkit- detallan la primera versión que funcionó con un prefijo.
| Property | Chrome | Internet Explorer / Edge | Firefox | Safari | Opera |
|---|---|---|---|---|---|
| isolation | 41.0 | 79.0 | 36.0 | Yes | 30.0 |
