martes, 6 de diciembre de 2022

Propiedad CSS image-resolution.(resolución de imagen)

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

image-resolution

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



¡¡Aprender es interesante y divertido!!


Salu2 y bendiciones,
Atte, Angel Paz
Duda con el Efecto rayo 71pkhu