` de proporción fija alrededor de un `
` nativo, con estilos de `@luz-ds/core`. Sin JavaScript.
- La imagen llena el marco y se recorta para ajustarse a él.
- El marco es una superficie lisa `--luz-surface-strong`: se muestra sin imagen, mientras se carga o si falla. El texto alternativo de una imagen que no se carga aparece sobre ella, al igual que las imágenes PNG y SVG transparentes.
- LUZ no incluye ninguna imagen de sustitución: la página no solicita nada que no haya especificado.
### Sin JavaScript
No cambia nada: el marco y la imagen se crean con HTML y CSS. Sin CSS, la imagen aparece con su tamaño original.
### Teclado y ARIA
El marco no tiene ninguna interacción propia.
- Los lectores de pantalla anuncian el `![]()
` mediante su texto alternativo; un marco vacío no anuncia nada.
- No añadas un rol ni un `aria-label` al marco.
- Si la imagen es un enlace, su nombre procede del texto alternativo, que debe indicar adónde lleva.
### Cuándo usarlo
Usa el marco de imagen para mostrar una imagen en un cuadro de forma fija, como la portada de una tarjeta o la cabecera de un artículo, cuando la imagen pueda faltar.
- Contenido de otras personas o de un sistema de gestión de contenidos.
- Una página creada antes de disponer de las imágenes.
### Cuándo no usarlo
No lo uses con imágenes que deban conservar su forma, como gráficos o capturas de pantalla: el marco las recorta.
- Para un gráfico o diagrama con un pie, usa una [figura](https://nandovejer.github.io/luz/es/docs/components/figure/).
- Para los iconos y logotipos, usa un `![]()
` o un SVG con su tamaño original.
- No uses nunca un marco vacío como sustituto de una imagen informativa: si falta, indícalo con texto.
