La propiedad CSS especifica la resolución intrínseca de todas las imágenes ráster utilizadas en el elemento o sobre él. Afecta a las imágenes de contenido, como los elementos reemplazados y el contenido generado, y las imágenes decorativas, como las imágenes .image-resolution background-image
La resolución de la imagen se define como el número de píxeles de la imagen por unidad de longitud, por ejemplo, píxeles por pulgada. De forma predeterminada, CSS asume una resolución de un píxel de imagen por unidad de CSS px; sin embargo, la image-resolutionpropiedad permite especificar una resolución diferente.
Sintaxis
image-resolution: from-image;
image-resolution: 300dpi;
image-resolution: from-image 300dpi;
image-resolution: 300dpi snap;
/* Global values */
image-resolution: inherit;
image-resolution: initial;
image-resolution: revert;
image-resolution: revert-layer;
image-resolution: unset;
Valores
<resolution>
Especifica la resolución intrínseca explícitamente.
from-image
Utiliza la resolución intrínseca especificada por el formato de imagen. Si la imagen no especifica su propia resolución, se usa la resolución explícitamente especificada (si se proporciona); de lo contrario, el valor predeterminado es 1dppx (1 píxel de imagen por unidad CSS px).
snap
Si snap se proporciona la palabra clave, la resolución calculada es la resolución especificada redondeada al valor más cercano que asignaría un píxel de imagen a un número entero de píxeles del dispositivo. Si la resolución se toma de la imagen, la resolución intrínseca utilizada es la resolución nativa de la imagen ajustada de manera similar.
Nota: Como los formatos vectoriales como SVG no tienen una resolución intrínseca, esta propiedad no tiene efecto en las imágenes vectoriales
Definición Formal
Sintaxis formal
image-resolution =
[ from-image || ] &&
snap?
Ejemplos
Configuración de un valor alto de ppp para imprimir
Al imprimir el documento, utilice una resolución más alta.
@media print {
.myimage {
image-resolution: 300dpi;
}
}
Usar resolución de imagen con reserva
Utiliza la resolución de la imagen. Si la imagen no tiene resolución, utilice 300 ppp en lugar de la predeterminada de 1 ppp.
.myimage {
image-resolution: from-image 300dpi;
}
Compatibilidad del navegador
Actualmente, ningún navegador admite esta propiedad.
Fuentes de consulta: https://developer.mozilla.org/en-US/docs/Web/CSS/image-resolution
| Salu2 y bendiciones, Atte, Angel Paz |  |
