CSS
Uso de aspect-ratio y comportamiento de elementos reemplazados como imágenes, videos e iframes, incluyendo tamaños intrínsecos y object-fit.
Algunos elementos tienen dimensiones o contenido definidos fuera del formatting model normal, como imágenes, video, iframe e inputs.
.project-media {
aspect-ratio: 16 / 9;
}El navegador reemplaza la caja por un recurso o control externo al contenido CSS normal.
Ejemplos comunes:
imgvideoiframecanvasNo todos reaccionan igual a pseudo-elementos, line-height o contenido generado.
Una imagen puede aportar:
Los atributos HTML width/height ayudan a reservar espacio antes de descargar.
.card-media {
aspect-ratio: 4 / 3;
}Define una proporción preferida. Necesita al menos una dimensión automática para influir normalmente.
.media {
inline-size: 100%;
aspect-ratio: 16 / 9;
}img {
aspect-ratio: auto 3 / 2;
}Puede usar un ratio provisional hasta conocer el ratio intrínseco del recurso.
img {
inline-size: 100%;
block-size: 100%;
object-fit: cover;
}contain: muestra todo el recurso.cover: llena y recorta.fill: estira.none: usa tamaño intrínseco.scale-down: elige none o contain más pequeño.img {
object-fit: cover;
object-position: 50% 30%;
}Cambia el punto visible al recortar, no la semántica ni el archivo descargado.
Usa img cuando el recurso es contenido y necesita alt. Usa background cuando es puramente decorativo o parte de una superficie.
CSS no sustituye el contrato de accesibilidad de HTML.
img {
max-inline-size: 100%;
block-size: auto;
}Combínalo con dimensiones HTML o aspect-ratio para reservar espacio.
¿Por qué aspect-ratio puede no cambiar una caja con width y height ambos fijos?
Porque las dos dimensiones ya determinan el tamaño; la proporción preferida no necesita resolver una dimensión automática.
Display y formatting contexts explica qué tipo de caja y algoritmo de layout se crea.