Question

我正在使用视频作为其中一个部分的背景的网站上工作。与https://templated.co/broadcast类似。我使用的模板的问题是视频周围有大的白色区域，几乎就像它不是100％宽，这就是他们在这里所说的：CSS - Background Video Seems To Zoom，因为我最初有一个问题，视频太大了，但添加填充底部看起来有点像黑客，肯定有更好的方法来解决这个问题。

我的html和css如下，所以你可以看到发生了什么。

＆＃13;

#videobcg {
  position: absolute;
  top: 0;
  left: 0;
  max-width: 100%;
  z-index: -100;
}

header {
  padding: 100px 0 0;
  text-align: center;
  color: #FFF;
}

.img-holder {
  height: 0;
  padding-bottom: 33%;
  overflow: hidden;
}

＆＃13;

<header class="bg-gradient" id="home">
  <div class="container mt-5">
    <h1>Mobile App Landing Page Template</h1>
    <p class="tagline">The one and only solution for any kind of mobila app landing needs. Just change the screenshots and texts and you are good to go. </p>
  </div>
  <div class="img-holder mt-3"><img src="images/iphonex.png" alt="phone" class="img-fluid">
    <video id="videobcg" preload="auto" autoplay="true" loop="loop" muted="muted" volume="0">
      <source src="https://static.lumosity.com/resources/home_page_templates/574/neuralnetwork.mp4" type="video/mp4">
      <source src="movie.webm" type="video/webm">Sorry, your browser does not support HTML5 video.
     </video>
  </div>
</header>

＆＃13;

Answer 1

非常简单的解决方案。只需像这样更改你的CSS：

#videobcg {
    min-width: 100%;
}

现在您使用的是max-width：100％。尝试最小宽度它会解决你的问题。

Answer 2

您可以使用object-fit: cover：

执行此操作

替换内容的大小可以保持其宽高比填充元素的整个内容框。如果对象的宽高比与其框的纵横比不匹配，那么对象就是夹住以适应。

而width height {或{em>视口单元}的100%和body {margin: 0} /* remove the default margin */ header { margin-top: 100px; /* modified */ text-align: center; color: #fff; } #videobcg { position: absolute; top: 0; left: 0; z-index: -100; width: 100%; /* or 100vw */ height: 100%; /* or 100vh */ object-fit: cover; /* added */ } .img-holder { height: 0; /*padding-bottom: 33%;*/ overflow: hidden; }也需要为同一个元素设置 ：

＆＃13;

<header class="bg-gradient" id="home">
  <div class="container mt-5">
    <h1>Mobile App Landing Page Template</h1>
    <p class="tagline">The one and only solution for any kind of mobila app landing needs. Just change the screenshots and texts and you are good to go. </p>
  </div>
  <div class="img-holder mt-3">
    <img src="images/iphonex.png" alt="phone" class="img-fluid">
    <video id="videobcg" preload="auto" autoplay="true" loop="loop" muted="muted" volume="0">
      <source src="https://static.lumosity.com/resources/home_page_templates/574/neuralnetwork.mp4" type="video/mp4">
      <source src="movie.webm" type="video/webm">Sorry, your browser does not support HTML5 video.
    </video>
  </div>
</header>

＆＃13;

<?php
use yii\widgets\ActiveForm;
?>

<?php $form = ActiveForm::begin(['options' => ['enctype' => 'multipart/form-data']]) ?>

<?= $form->field($model, 'file2')->fileInput() ?>

<button>Submit</button>

<?php ActiveForm::end() ?>

＆＃13;

视频在一个部分的背景上不是全尺寸

2 个答案: