Tengo un sitio para armar que tiene una relación de aspecto fija de aproximadamente16:9 Paisaje, como un video.

Quiero centrarlo y expandirlo para llenar el ancho disponible y la altura disponible, pero nunca crecer más en cada lado.

Por ejemplo:

Una página alta y delgada tendría el contenido extendiéndose todo el ancho mientras se mantiene una altura proporcional.Una página ancha y ancha tendría el contenido extendiéndose a toda la altura, con un ancho proporcional.

Hay dos métodos que he estado viendo:

Use una imagen con la relación de aspecto correcta para expandir un contenedordiv, pero no pude lograr que se comporte de la misma manera en los principales navegadores.Configuración de un relleno inferior proporcional, pero que solo funciona en relación con el ancho e ignora la altura. Simplemente sigue creciendo con el ancho y muestra barras de desplazamiento vertical.

Sé que podrías hacer esto con JS con bastante facilidad, pero me gustaría una solución CSS pura.

¿Algunas ideas?