如何保持 Div 的长宽比为 16:9 填满整个屏幕？

如何在填充屏幕宽度和高度的同时保持 Div 的宽高比

设计具有特定宽高比的网站时，例如 16:9 的类似视频的显示，有必要在填充可用屏幕空间的同时保持这个比例。此任务在确保内容居中并且永远不会超过两侧的最大尺寸方面提出了挑战。

应用 CSS 视口单位

实用的 CSS 解决方案涉及使用视口单位，vw（视口宽度）和 vh（视口高度）。这些单位允许元素相对于视口的大小调整其尺寸。通过将 div 的宽度设置为 100vw，它会扩展以填充整个屏幕宽度。为了保持 16:9 的宽高比，高度设置为 56.25vw（计算为 9/16 * 100vw）。

限制最大尺寸

为了防止元素溢出，使用最大高度和宽度约束最大高度：100vh和最大宽度：177.78vh（计算为16/9 * 100vh）。

定位和居中

使用绝对定位和设置在垂直和水平方向上对 div 进行定位和居中顶部，底部、左和右设置为 0。这可确保 div 在屏幕可用空间内保持居中。

通过组合这些 CSS 属性，您可以创建一个保持 16:9 宽高比、同时填充整个屏幕宽度和高度的 div 。该解决方案反应灵敏，并且可以在主要浏览器中一致工作，无需 JavaScript。

以上是如何保持 Div 的长宽比为 16:9 填满整个屏幕？的详细内容。更多信息请关注PHP中文网其他相关文章！