我有一个网站放在一起,有一个固定的纵横比约16:9
景观,就像一个视频.
我想让它居中并扩展,以填充可用的宽度和可用的高度,但永远不要在两侧变大.
For example:个
- 一个又高又薄的页面会让内容在保持一定比例高度的同时拉伸整个宽度.
- 一个短而宽的页面会让内容延伸到整个高度,宽度成比例.
我一直在研究两种方法:
- 使用具有正确纵横比的图像来扩展容器
div
,但我无法让它在主要浏览器中以相同的方式运行. - 设置成比例的底部填充,但这只相对于宽度起作用,而忽略高度.它只会随着宽度不断变大,并显示垂直滚动条.
我知道你可以很容易地用JS实现这一点,但我想要一个纯CSS解决方案.
有什么 idea 吗?