html - 居中、保持纵横比并覆盖屏幕的 CSS Canvas 或 Div 元素？

Question

试图找到一种优雅的 CSS 方式来保持 Div(或 Canvas )元素的纵横比，同时覆盖屏幕并保持 div 居中。

假设我们希望 div 为 16:9，但如果屏幕太窄，则允许 div 宽度向左和向右(裁剪)等量超出屏幕，同时填充 100% 的高度。如果屏幕太宽，则相反。

(模拟图像的 object-fit:cover 属性，但对 div 元素本身这样做)

Answer 1

Flexbox将是一个解决方案。

您需要容器上的 height 为 100vh(以覆盖页面的整个高度)，以及 display: flex、align-items: center 和 justify-content: center。

然后您需要做的就是在子元素上指定固定的宽度和高度。

元素将始终位于中心，同时还保留其尺寸和纵横比。这可以从以下方面看出:

body {
  margin: 0;
}

.container {
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
}

.element {
  border: 1px solid black;
  height: 100px;
  width: 100px;
}

<div class="container">
  <div class="element"></div>
</div>