如何在用 CSS 填充整个屏幕的同时保持 Div 的宽高比？

使用 CSS 填充屏幕宽度和高度时保持 Div 的宽高比

保持 div 的固定宽高比，同时确保它填充可用的屏幕宽度和高度，而无需在 CSS 中，超过两侧的尺寸可能是一项棘手的任务。为了应对这一挑战，我们提出了一个利用新视口单位 vw 和 vh 的纯 CSS 解决方案。

使用 vw 和 vh，我们可以定义相对于视口宽度和高度的 div 的宽度和高度。这可以确保 div 始终占据最大空间，而不会破坏宽高比。为了防止 div 溢出，我们还使用比率值设置 max-height 和 max-width 约束。

为了使 div 垂直和水平居中，我们使用position:absolute并将其定位在顶部，窗口的底部、左侧和右侧边缘。这可以确保无论屏幕尺寸如何，div 都保持居中。

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 */
}

此解决方案适应不同的屏幕尺寸，同时保持所需的 16:9 宽高比。垂直或水平调整窗口大小，div 也会相应调整，占据最大空间，不出现滚动条或变形。

以上是如何在用 CSS 填充整个屏幕的同时保持 Div 的宽高比？的详细内容。更多信息请关注PHP中文网其他相关文章！