Question

我分为三个部分，但是我的背景视频高度在第一部分中太高。作为回报，这将切断以下部分的内容。所以基本上我只需要我的视频容器与第一部分的大小相同即可。有什么想法吗？

我尝试更改最大高度，一起删除该部分以及其他各种CSS属性，但是我的视频高度仍然太大。

section {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  width: 100%;
  height: 100vh;
}

section#home {
  width: 100% height: 100%;
}

section#work {
  background: url("https://images.unsplash.com/photo-1515724684585- 
 ec93c008b8b5?ixlib=rb- 1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1875&q=80") 
 no-repeat center center/cover;
}

section#contact {
  background: url("https://images.unsplash.com/photo-1487131765602- 
 9c2220588c4d?ixlib=rb- 1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=3451&q=80") 
 no-repeat center center/cover;
}

.work_container {
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
}

.video_container video {
  min-width: 100%;
  min-height: 100%;
}

<div class="container">
  <nav class="navbar">
    <header>V E R T E X // D R O N E S</header>
    <ul>
      <li><a href="#home">Home</a></li>
      <li><a href="#work">Work</a></li>
      <li>
        <a href="#contact"></a>Contact</li>
    </ul>
  </nav>
  <section id="home">
    <div class="video_container"></div>
    <video src="drone.mp4" loop autoplay muted></video>
  </section>
  <section id="work">
    <div class="work_container"></div>
  </section>
  <section id="contact"></section>
</div>

Answer 1

将视频设为100％width和height，并使用object-fit设置是否应填充容器（可能会裁剪视频的一部分）使用cover作为值，或者使用contain值来包含整个视频（不裁剪，但可能会添加letterboxing ）。

section {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  width: 100%;
  height: 100vh;
}

#work {
  background: url("https://images.unsplash.com/photo-1515724684585-ec93c008b8b5?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1875&q=80") no-repeat center center/cover;
}

#contact {
  background: url("https://images.unsplash.com/photo-1487131765602-9c2220588c4d?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=3451&q=80") no-repeat center center/cover;
}

.work_container {
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
}

#home video {
  width: 100%;
  height: 100%;
  object-fit:cover; /*or contain*/
}

<link href="https://fonts.googleapis.com/css?family=Oleo+Script" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Exo+2:400,700" rel="stylesheet">
<link href="https://fonts.googleapis.com/css? 
family=Amatic+SC:400,700" rel="stylesheet">


<div class="container">
  <nav class="navbar">
    <header>V E R T E X // D R O N E S</header>
    <ul>
      <li><a href="#home">Home</a></li>
      <li><a href="#work">Work</a></li>
      <li><a href="#contact">Contact</a></li>
    </ul>
  </nav>
  <section id="home">
    <video src="http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4" loop autoplay muted></video>
  </section>
  <section id="work">
    <div class="work_container"></div>
  </section>
  <section id="contact"></section>
</div>

如何防止我的背景视频超出部分范围？

1 个答案: