<image>

Resumen

El tipo de dato CSS <image> representa una imagen 2D. Hay dos tipos de imágenes en CSS: imágenes planas estáticas, generalmente referenciadas usando una URL, e imágenes dinámicamente generadas, como degradados o representaciones de partes del árbol.

CSS puede manejar diferentes tipos de imágenes:

• imágenes con dimensiones intrínsecas, es decir, su tamaño natural, como una imagen jpeg que tiene dimensiones fijas.
• imágenes con varias dimensiones intrínsecas, que coexisten en distintas versiones dentro de un archivo, com algunos formatos .ico. En ese caso, la dimensión intrínseca será la de la imagen con área más grande, y con la proporción más próxima al tamaño del contenedor.
• imágenes sin dimensiones intrínsecas, pero con una relación de aspecto intrínseca, entre su anchura y altura, como algunas imágenes vectorizadas, en formato SVG, por ejemplo.
• imágenes sin dimensiones intrínsecas, ni relación de aspecto intrínseca, como un degradado CSS, por ejemplo.

CSS determina el tamaño concreto del objeto usando estas dimensiones intrínsecas, el tamaño específico en propiedades CSS como width, height o background-size, y el tamaño predeterminado del objeto definido por el tipo de propiedad con el que se usa la imagen:

El tamaño concreto del objeto es calculado usando los siguientes algoritmos:

• Si el tamaño específico define tanto anchura como altura, estos valores son usados como el tamaño concreto del objeto.
• Si el tamaño específico define solo anchura o solo altura, el valor faltante es determinado usando la proporción intrínseca (si la hay), las dimensiones intrínsecas (si el valor especificado coincide), o usando el tamaño predeterminado del objeto para ese valor faltante.
• Si el valor especificado no define anchura ni altura, el tamaño concreto del objeto será calculado de modo que coincida con la relación de aspecto intrínseca de las imágenes, pero sin exceder el tamaño predeterminado en cualquiera de sus dimensiones. Si la imagen no tiene relación de aspecto intrínseca, se usará la del objeto al que se está aplicando; si el objeto no tiene ninguna, la anchura o altura faltante se tomará del tamaño predeterminado del objeto.

Las imágenes pueden ser usadas en numerosas propiedades CSS, como background-image, border-image, content, list-style-image o cursor.

Sintáxis

La representación de un tipo de dato CSS <image> puede ser una de las siguientes:

• Una imagen denotada por un tipo de dato <uri> y la función url();
• Un degradado CSS (<gradient>);
• Una parte de la página, definida por la función element().

Ejemplos

Estos son valores válidos para imágenes:

url(test.jpg)                          /* La función url(), mientras test.jpg sea una imagen */
linear-gradient(to bottom, blue, red)  /* Un degradado (<gradient>) */
element(#colonne3)                     /* Una párte de la página, usando la función element(),
                                          mientras colonne3 sea un identificador CSS existente en la página. */

Estos son valores incorrectos para imágenes:

cervin.jpg                             /* Un archivo de imagen debe ser definido usando la función url(). */
url(report.pdf)                        /* El archivo indicado en la función url() debe ser una imagen. */
element(#fakeid)                       /* Si 'fakeid' no es un identificador CSS existente en la página. */

Especificaciones

Compatibilidad de navegadores

Véase también

• Degradados CSS, <gradient>, linear-gradient(), radial-gradient(), repeating-linear-gradient(), repeating-radial-gradient()
• element()