css - 模拟背景大小 : cover with center position on HTML5

Question

我正在尝试模拟 background-size: cover 的功能在 <video>元素。我已经设法用下面的代码做到了这一点:

<video id="videobackground" autoplay="true" loop="true">
    <source src="BackgroundFinal2.mp4" type="video/mp4">
</video>


#videobackground { 
  position: absolute;
  bottom: 0px; 
  right: 0px; 
  min-width: 100%; 
  min-height: 100%; 
  width: auto; 
  height: auto; 
  z-index: -1000; 
  overflow: hidden
}

问题是我还想模拟 background-position: center center; 的功能我不知道该怎么做。使用当前代码，如果需要，我的视频会从左侧和顶部被切断 - 但是我希望它从两侧被切断。

有什么想法/解决方案吗？谢谢!

Answer 1

免责声明:我只试验了大约 9 个月的 Web 开发(或任何类型的代码/脚本)，所以不要认为我的解决方案没有错误。请参阅脚注了解已知问题。

我一直面临着同样的问题，我想我完全理解你在寻找什么。

基本上，无论屏幕宽度/高度如何，视频的水平和垂直边缘都不应进入视口(viewport)，应保留宽高比，视频应垂直和水平居中。

1920x800 分辨率的视频示例:

*(缺少 CSS 供应商前缀)

---

HTML

<div class="bg-vid-container">
    <video id="bg-vid" class="cover" poster="lib/img/bg-vid.poster.png" autoplay loop>
        <source src="lib/vid/bg-vid.mp4" type="video/mp4"/>
    </video>
</div>

CSS

.bg-vid-container {
    width: 100%;
    height: 100%;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
}

video.cover {
    width: 100%;
    min-width: 240vh;
    height: auto;
}

---

将 justify-content 和 align-items 设置为居中的 flex box 模型将保持视频垂直和水平居中，并且 overflow: hidden; 停止不需要的滚动。

在这种情况下，min-width 设置为 240vh( View 高度单位，其中 1vh=1% 的窗口高度)。这是通过将纵横比缩放到 100 的高度来计算的(我使用 Andrew Hedges 的 Aspect Ratio Calculator )。

1920x800 缩放到 240x100。

这将防止视频的高度下降到 100% 以下，但如果浏览器窗口变得那么宽，它仍然允许它的宽度为 100%，只需在那个点增加它的高度。

根据 caniuse.com , flex box模型和vh单元都有很好的支持。

这在移动设备上(目前)无法正常工作，因为在某些设备上，键盘向上滑动会调整窗口大小。我正在为此开发一个 jQuery/CSS 媒体查询解决方案。如果它们按预期工作，我会更新结果。 iOS 7 对 vh 的支持也有点粗略。