如何在 CSS 中保持 Div 的长宽比，同时填充整个屏幕？

在 CSS 中填充屏幕宽度和高度时保持 Div 的宽高比

在填充屏幕宽度时保持 div 的宽高比和高度，我们可以利用CSS视口单位vw（视口宽度）和vh（视口高度）。这种方法可确保元素始终填充最大视口大小，而不会破坏比例或创建滚动条。

FIDDLE

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

此 CSS 确保div:

• 扩展以包含屏幕的整个宽度和高度（vw 和 vh 单位）。
• 保持宽高比 16:9（高:宽比为 56.25） vw:100vw).
• 通过设置最大高度和宽度来防止溢出约束。
• 将 div 在可用视口空间内垂直和水平居中。

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