调整屏幕大小时无法让我的 video-background 保持不变

Question

我是 CSS 的新人。我目前正在测试视频背景，当我调整屏幕大小或打开我的开发工具时，我无法让视频背景保持相同大小。每当我把屏幕变小，背景就会变小。

This is what the background looks like when the screen is smaller

任何人都可以帮我弄清楚如何使我的视频背景具有响应性并使其无论屏幕尺寸如何都保持相同的尺寸吗？

这是我目前的视频背景样式：

    video {
      z-index: -1000;
      left: 50%;
      max-width: 100%;
      position: absolute;
      top: 50%;
      transform: translate(-50%, -50%);
      -webkit-transform: translate(-50%, -50%);
      -moz-transform: translate(-50%, -50%);
      -ms-transform: translate(-50%, -50%);
    }
    .showcase {
      display: block;
      height: auto;
      overflow: hidden;
      position: relative;
      padding-bottom: 100%;
    }

我的 body 没有任何样式。我的视频标签位于展示标签内。

我的视频背景是这样渲染的：

function Main() {
  return (
    <>
      <section id="showcase">
        <video src="clouds.mp4" muted loop autoPlay></video>
        <QuoteBox />
      </section>
    </>
  );
}

Answer 1

不同的视口会有不同的宽高比，因此如果 top/bottom 或侧面没有一些 space，视频将不会总是完全适合内部。

由于在这种情况下让视频填满整个屏幕更为重要，因此此代码段说明了在视频元素上使用 CSS object-fit: cover 并将尺寸设置为整个视口。

video {
  z-index: -1000;
  left: 50%;
  width: 100vw;
  height: 100vh;
  position: absolute;
  top: 50%;
  -webkit-transform: translate(-50%, -50%);
  -moz-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  object-fit: cover;
}

.showcase {
  display: block;
  height: auto;
  overflow: hidden;
  position: relative;
  padding-bottom: 100%;
}

<section id="showcase">
  <video src="https://www.w3schools.com/html/mov_bbb.mp4" muted loop autoPlay></video>
</section>

调整屏幕大小时无法让我的 video-background 保持不变

Cannot get my video-background to stay the same when resizing screen

css

styling

reactjs