相关疑难解决方法(0)

我有一个网站,它有一个固定的长宽比近似16:9景观,像一个视频.

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

例如:

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

我一直在研究两种方法:

1. 使用具有正确宽高比的图像来扩展容器div,但我无法让它在主要浏览器中以相同的方式运行.
2. 设置比例底部填充,但仅相对于宽度工作并忽略高度.它随着宽度不断变大,并显示垂直滚动条.

我知道你可以很容易地用JS做到这一点,但我想要一个纯CSS解决方案.

有任何想法吗？