Elementos multimedia de relación de aspecto y tamaño intrínseco

Si necesita un tamaño de relación de aspecto div(o cualquier elemento que pueda tener hijos), puede hacerlo. Quizás la forma más limpia sea un pseudoelemento de tamaño de propiedad personalizado que impulsa la altura mínima correcta a través del relleno basado en el ancho.

Pero los elementos mediáticos como ellos imgno tienen hijos. La videoetiqueta no se cierra automáticamente, pero cuando es compatible (casi siempre), su contenido se reemplaza con un DOM oculto que no controlas. Además, estos son los dos únicos elementos que “se adaptan a un recurso externo”. Entonces, ¿cómo se les aplica la relación de aspecto cuando se utiliza una variable ancho como 100%o 75vw? Bueno, una vez que se carguen, tendrán su relación de aspecto natural, así que eso es bueno. Pero también significa que no conocen la altura mientras se están cargando y puede provocar un reflujo que afecte el rendimiento.

Una solución es colocarlos en un contenedor con una relación de aspecto, forzándolos a las esquinas con un posicionamiento absoluto. Pero, por sí solos, son incapaces de ajustar correctamente el tamaño a la relación de aspecto hasta que se cargan.

De ahí el intrinsicsizeatributo para “todos los tipos de elementos de imagen (incluidas imágenes SVG) y vídeos” que ahora está en desarrollo.

img intrinsicsize="400x300"

El documento explicativo es útil. La razón por la que lo es intrinsicsizey no aspectratioes porque una relación de aspecto no proporciona tanta información útil o utilizable. Me encantaría verlo funcionar en cualquier elemento y también incorporarlo a CSS.