html - 保持 div 的纵横比但在 CSS 中填充屏幕宽度和高度？

Question

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

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

例如:

1. 又高又薄的页面内容会拉伸(stretch)整个宽度，同时保持按比例的高度。
2. 短而宽的页面内容会拉伸(stretch)整个高度，宽度成比例。

---

我一直在研究两种方法:

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

---

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

有什么想法吗？

Answer 1

使用新的 CSS viewport units vw 和vh(视口(viewport)宽度/视口(viewport)高度)

FIDDLE

在垂直和水平方向调整大小，您会看到该元素将始终填充最大视口(viewport)大小，而不会破坏比例并且没有滚动条!

(纯)CSS

div
{
    width: 100vw; 
    height: 56.25vw; /* height:width ratio = 9/16 = .5625  */
    background: pink;
    max-height: 100vh;
    max-width: 177.78vh; /* 16/9 = 1.778 */
    margin: auto;
    position: absolute;
    top:0;bottom:0; /* vertical center */
    left:0;right:0; /* horizontal center */
}

* {
  margin: 0;
  padding: 0;
}
div {
  width: 100vw;
  height: 56.25vw;
  /* 100/56.25 = 1.778 */
  background: pink;
  max-height: 100vh;
  max-width: 177.78vh;
  /* 16/9 = 1.778 */
  margin: auto;
  position: absolute;
  top: 0;
  bottom: 0;
  /* vertical center */
  left: 0;
  right: 0;
  /* horizontal center */
}

<div></div>

如果你想使用最多 90% 的视口(viewport)宽度和高度: FIDDLE

* {
  margin: 0;
  padding: 0;
}
div {
  width: 90vw;
  /* 90% of viewport vidth */
  height: 50.625vw;
  /* ratio = 9/16 * 90 = 50.625 */
  background: pink;
  max-height: 90vh;
  max-width: 160vh;
  /* 16/9 * 90 = 160 */
  margin: auto;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}

<div></div>

此外，浏览器支持也非常好:IE9+、FF、Chrome、Safari- caniuse