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

Question

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

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

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

例如：

1. 高而薄的页面将使内容伸展整个宽度，同时保持比例高度。

2. 较短的宽页面将使内容延伸到整个高度，具有成比例的宽度。

---

我一直在研究两种方法：

1. 使用具有正确宽高比的图像来扩展容器div，但我无法让它在主要浏览器中以相同的方式运行。

2. 设置比例底部填充，但仅相对于宽度工作并忽略高度。它随着宽度不断变大，并显示垂直滚动条。

---

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

有任何想法吗？

Answer 1

使用新的CSS视口单位&nbsp;vw和vh（视口宽度/视口高度）小提琴垂直和水平调整大小，您将看到元素将始终填充最大视口大小而不会破坏比例并且没有滚动条！（纯粹）CSSdiv{ &nbsp;&nbsp;&nbsp;&nbsp;width:&nbsp;100vw;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;height:&nbsp;56.25vw;&nbsp;/*&nbsp;height:width&nbsp;ratio&nbsp;=&nbsp;9/16&nbsp;=&nbsp;.5625&nbsp;&nbsp;*/ &nbsp;&nbsp;&nbsp;&nbsp;background:&nbsp;pink; &nbsp;&nbsp;&nbsp;&nbsp;max-height:&nbsp;100vh; &nbsp;&nbsp;&nbsp;&nbsp;max-width:&nbsp;177.78vh;&nbsp;/*&nbsp;16/9&nbsp;=&nbsp;1.778&nbsp;*/ &nbsp;&nbsp;&nbsp;&nbsp;margin:&nbsp;auto; &nbsp;&nbsp;&nbsp;&nbsp;position:&nbsp;absolute; &nbsp;&nbsp;&nbsp;&nbsp;top:0;bottom:0;&nbsp;/*&nbsp;vertical&nbsp;center&nbsp;*/ &nbsp;&nbsp;&nbsp;&nbsp;left:0;right:0;&nbsp;/*&nbsp;horizontal&nbsp;center&nbsp;*/}*&nbsp;{ &nbsp;&nbsp;margin:&nbsp;0; &nbsp;&nbsp;padding:&nbsp;0;}div&nbsp;{ &nbsp;&nbsp;width:&nbsp;100vw; &nbsp;&nbsp;height:&nbsp;56.25vw; &nbsp;&nbsp;/*&nbsp;100/56.25&nbsp;=&nbsp;1.778&nbsp;*/ &nbsp;&nbsp;background:&nbsp;pink; &nbsp;&nbsp;max-height:&nbsp;100vh; &nbsp;&nbsp;max-width:&nbsp;177.78vh; &nbsp;&nbsp;/*&nbsp;16/9&nbsp;=&nbsp;1.778&nbsp;*/ &nbsp;&nbsp;margin:&nbsp;auto; &nbsp;&nbsp;position:&nbsp;absolute; &nbsp;&nbsp;top:&nbsp;0; &nbsp;&nbsp;bottom:&nbsp;0; &nbsp;&nbsp;/*&nbsp;vertical&nbsp;center&nbsp;*/ &nbsp;&nbsp;left:&nbsp;0; &nbsp;&nbsp;right:&nbsp;0; &nbsp;&nbsp;/*&nbsp;horizontal&nbsp;center&nbsp;*/}<div></div>如果要使用视口最大宽度和高度的90％：FIDDLE*&nbsp;{ &nbsp;&nbsp;margin:&nbsp;0; &nbsp;&nbsp;padding:&nbsp;0;}div&nbsp;{ &nbsp;&nbsp;width:&nbsp;90vw; &nbsp;&nbsp;/*&nbsp;90%&nbsp;of&nbsp;viewport&nbsp;vidth&nbsp;*/ &nbsp;&nbsp;height:&nbsp;50.625vw; &nbsp;&nbsp;/*&nbsp;ratio&nbsp;=&nbsp;9/16&nbsp;*&nbsp;90&nbsp;=&nbsp;50.625&nbsp;*/ &nbsp;&nbsp;background:&nbsp;pink; &nbsp;&nbsp;max-height:&nbsp;90vh; &nbsp;&nbsp;max-width:&nbsp;160vh; &nbsp;&nbsp;/*&nbsp;16/9&nbsp;*&nbsp;90&nbsp;=&nbsp;160&nbsp;*/ &nbsp;&nbsp;margin:&nbsp;auto; &nbsp;&nbsp;position:&nbsp;absolute; &nbsp;&nbsp;top:&nbsp;0; &nbsp;&nbsp;bottom:&nbsp;0; &nbsp;&nbsp;left:&nbsp;0; &nbsp;&nbsp;right:&nbsp;0;}<div></div>此外，浏览器支持也很不错：IE9 +，FF，Chrome，Safari-&nbsp;caniuse

Answer 2

只需Danield在LESS mixin中重新制定答案，以便进一步使用：//&nbsp;Mixin&nbsp;for&nbsp;ratio&nbsp;dimensions&nbsp;&nbsp;&nbsp;&nbsp;.viewportRatio(@x,&nbsp;@y)&nbsp;{ &nbsp;&nbsp;width:&nbsp;100vw; &nbsp;&nbsp;height:&nbsp;@y&nbsp;*&nbsp;100vw&nbsp;/&nbsp;@x; &nbsp;&nbsp;max-width:&nbsp;@x&nbsp;/&nbsp;@y&nbsp;*&nbsp;100vh; &nbsp;&nbsp;max-height:&nbsp;100vh;}div&nbsp;{ &nbsp;&nbsp;//&nbsp;Force&nbsp;a&nbsp;ratio&nbsp;of&nbsp;5:1&nbsp;for&nbsp;all&nbsp;<div> &nbsp;&nbsp;.viewportRatio(5,&nbsp;1); &nbsp;&nbsp;background-color:&nbsp;blue; &nbsp;&nbsp;margin:&nbsp;0; &nbsp;&nbsp;position:&nbsp;absolute; &nbsp;&nbsp;top:&nbsp;0;&nbsp;right:&nbsp;0;&nbsp;bottom:&nbsp;0;&nbsp;left:&nbsp;0;}