保持div的纵横比但在CSS中填充屏幕宽度和高度? [英] Maintain aspect ratio of div but fill screen width and height in CSS?

问题描述

我有一个网站要放在一起，它具有大约 16:9 横向的固定纵横比，就像视频一样.

I have a site to put together that has a fixed aspect ratio of approximately 16:9 landscape, like a video.

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

I want to have it centred and expand to fill the available width, and the available height, but never to grow larger on either side.

例如:

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

<小时>

我一直在研究两种方法:

---

There are two methods I've been looking at:

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

1. Use an image with the right aspect ratio to expand a container div, but I couldn't get it to behave the same way across major browsers.
2. Setting a proportional bottom padding, but that only works relatively to the width and ignores the height. It just keeps getting bigger with the width and displays vertical scroll bars.

<小时>

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

---

I know you could do this with JS quite easily, but I'd like a pure CSS solution.

有什么想法吗?

推荐答案

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

There is now a new CSS property specified to address this: object-fit.

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

该功能现在得到广泛支持(http://caniuse.com/#feat=object-适合).

The feature is widely supported by now (http://caniuse.com/#feat=object-fit).

这篇关于保持div的纵横比但在CSS中填充屏幕宽度和高度?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！