我有一个可以放在一起的网站，它的固定长宽比大约16:9等于风景，例如视频。

我想使它居中并扩展以填充可用的宽度和可用的高度，但不要在任何一侧变大。

例如：

1. 高而薄的页面将使内容伸展整个宽度，同时保持成比例的高度。
2. 短而宽的页面将使内容伸展到整个高度，并具有成比例的宽度。

我一直在研究两种方法：

1. 使用具有正确长宽比的图像来扩展容器div，但我无法在主要浏览器中以相同的方式表现该图像。
2. 设置成比例的底部填充，但这仅相对于宽度有效，而忽略高度。它的宽度会不断增大，并显示垂直滚动条。

我知道您可以使用JS轻松完成此操作，但是我想要一个纯CSS解决方案。

有任何想法吗？