我有一个网站放在一起,有一个固定的纵横比约16:9景观,就像一个视频.

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

For example:

  1. 一个又高又薄的页面会让内容在保持一定比例高度的同时拉伸整个宽度.
  2. 一个短而宽的页面会让内容延伸到整个高度,宽度成比例.

我一直在研究两种方法:

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

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

有什么 idea 吗?

推荐答案

现在指定了一个新的CSS属性来解决这个问题:object-fit.

https://developer.mozilla.org/en-US/docs/Web/CSS/object-fit

now(http://caniuse.com/#feat=object-fit)广泛支持该功能.

Html相关问答推荐

如何改进这个jQuery滑动器的功能?

Bootstrap右和左颈部

我需要主页按钮出现在中间

将网格包装在css中

Angular Project中的星级 Select

如何从卷轴中排除粘性元素?

在NzMessageService中传递动态TemplateRef- Angular 15

天使17:令人惊叹的动画

为什么根捕获上的`min-height`溢出,而`height`没有?

列表项文本在占据剩余空间之前在标记下换行

子元素放在文本样式之后,样式会 destruct

防止HTML输入中出现负数但接受小数

绝对类在另一个绝对类之上

将图像高度调整到容器 div 中而不使其高度增加

在不扭曲图像的情况下将图像放入灵活的 Div 框内

调整大小时 CSS 溢出

为什么相同持续时间的转换需要不同的时间?

辅助功能:alt 或 alt="" 用于装饰图像

如何自定义具有白色透明背景的光标图像?

下拉菜单项在页面加载时显示,需要隐藏直到悬停