30 lines
2.7 KiB
Markdown
30 lines
2.7 KiB
Markdown
---
|
|
title: CSS Images
|
|
localeTitle: Imágenes CSS
|
|
---
|
|
## Imágenes CSS
|
|
|
|
Esto ayuda a agregar una imagen a un sitio web.
|
|
|
|
#### Ejemplo de código
|
|
|
|
`<img src="picture.jpg" alt="Picture" width="100" height="100">`
|
|
|
|
* **src:** consiste en el valor de la ruta a la imagen requerida
|
|
* **alt:** Si la imagen no se muestra, se puede mostrar un texto alternativo utilizando el atributo alt.
|
|
* **ancho:** esto especifica un ancho para la imagen (puede ser porcentaje o px o automático)
|
|
* **altura:** esto especifica una altura para la imagen (puede ser porcentaje o px o automático)
|
|
|
|
#### Más información:
|
|
|
|
##### Propiedades
|
|
|
|
[`image-orientation`](/en-US/docs/Web/CSS/image-orientation "La propiedad CSS de orientación de imagen describe cómo corregir la orientación predeterminada de una imagen.") [`image-rendering`](/en-US/docs/Web/CSS/image-rendering "La propiedad CSS de representación de imágenes proporciona una sugerencia para el navegador sobre el algoritmo que debe usar para escalar imágenes.") [`object-fit`](/en-US/docs/Web/CSS/object-fit "La propiedad CSS de ajuste de objeto especifica cómo un elemento reemplazado, como <img> o <video>, debe redimensionarse para que se ajuste a su contenedor.") [`object-position`](/en-US/docs/Web/CSS/object-position "La propiedad CSS de posición de objeto determina la alineación del elemento seleccionado dentro de su caja.")
|
|
|
|
##### Funciones
|
|
|
|
[`linear-gradient()`](/en-US/docs/Web/CSS/linear-gradient "La documentación sobre esto aún no se ha escrito; Por favor considere contribuir!") [`radial-gradient()`](/en-US/docs/Web/CSS/radial-gradient "La documentación sobre esto aún no se ha escrito; Por favor considere contribuir!") [`repeating-linear-gradient()`](/en-US/docs/Web/CSS/repeating-linear-gradient "La documentación sobre esto aún no se ha escrito; Por favor considere contribuir!") [`repeating-radial-gradient()`](/en-US/docs/Web/CSS/repeating-radial-gradient "La documentación sobre esto aún no se ha escrito; Por favor considere contribuir!") [`element()`](/en-US/docs/Web/CSS/element "La documentación sobre esto aún no se ha escrito; Por favor considere contribuir!")
|
|
|
|
##### Tipos de datos
|
|
|
|
[`<image>`](/en-US/docs/Web/CSS/image "El tipo de datos CSS de <imagen> representa una imagen 2D. Hay dos tipos de imágenes: imágenes simples, generalmente referenciadas mediante una URL, e imágenes generadas dinámicamente, como las generadas con <gradient> o element (). Las imágenes se pueden usar con numerosas propiedades CSS, como imagen de fondo, imagen de borde, contenido, imagen de estilo de lista y cursor.") [`<uri>`](/en-US/docs/Web/CSS/uri "La documentación sobre esto aún no se ha escrito; Por favor considere contribuir!") |