模拟背景大小:覆盖<video>或<img>

Question

我如何可以模拟的功能background-size:cover就像一个HTML元素上<video>还是<img>？

我喜欢它的工作方式

background-size: cover;
background-position: center center;

Answer 1

的jsfiddle

使用背景封面适用于图像,因此宽度为100%.这些并不是最佳选择<video>,而且这些答案过于复杂.您不需要jQuery或JavaScript来完成全宽视频背景.

请记住,我的代码不会完全覆盖像封面一样的视频,但它会使视频尽可能大,以保持宽高比,仍然覆盖整个背景.任何多余的视频都会从页面边缘流失,哪些方面取决于您锚定视频的位置.

答案很简单.

只需使用此HTML5视频代码或以下内容:(在整页测试)

html, body {
  width: 100%; 
  height:100%; 
  overflow:hidden;
}

#vid{
  position: absolute;
  top: 50%; 
  left: 50%;
  -webkit-transform: translateX(-50%) translateY(-50%);
  transform: translateX(-50%) translateY(-50%);
  min-width: 100%; 
  min-height: 100%; 
  width: auto; 
  height: auto;
  z-index: -1000; 
  overflow: hidden;
}

<video id="vid" video autobuffer autoplay>
  <source id="mp4" src="http://grochtdreis.de/fuer-jsfiddle/video/sintel_trailer-480.mp4" type="video/mp4">
</video>

最小高度和最小宽度将允许视频保持视频的宽高比,这通常是正常分辨率下任何普通浏览器的宽高比.任何多余的视频都会从页面侧面流出.

Answer 2

这是我把头发拉了一段时间的东西,但我遇到了一个不使用任何脚本的优秀解决方案,并且可以使用5行CSS实现完美的视频封面模拟(如果算上选择器和括号,则可以使用9个).这有0个边缘情况,它不能完美地工作,缺乏CSS3兼容性.

你可以在这里看到一个例子

Timothy解决方案的问题在于它无法正确处理缩放.如果周围元素小于视频文件,则不会按比例缩小.即使你给视频标签一个很小的初始大小,比如16px到9px,auto最终也会迫使它达到其原始文件大小的最小值.使用此页面上当前最受欢迎的解决方案,我无法将视频文件缩小,从而产生极大的缩放效果.

但是,如果您的视频的宽高比已知,例如16:9,则可以执行以下操作:

.parent-element-to-video {
    overflow: hidden;
}
video {
    height: 100%;
    width: 177.77777778vh; /* 100 * 16 / 9 */
    min-width: 100%;
    min-height: 56.25vw; /* 100 * 9 / 16 */
}

如果视频的父元素设置为覆盖整个页面(例如position: fixed; width: 100%; height: 100vh;),那么视频也将如此.

如果您希望视频居中,则可以使用万无一失的居中方法:

/* merge with above css */
.parent-element-to-video {
    position: relative; /* or absolute or fixed */
}
video {
    position: absolute;
    left: 50%; /* % of surrounding element */
    top: 50%;
    transform: translate(-50%, -50%); /* % of current element */
}

当然,vw,vh,和transform是CSS3,所以如果你需要用多少旧的浏览器兼容,你需要使用脚本.

Answer 3

对于某些浏览器,您可以使用

object-fit: cover;

http://caniuse.com/object-fit

Answer 4

这就是我这样做的方式.一个工作的例子就在这个jsFiddle中.

var min_w = 300; // minimum video width allowed
var vid_w_orig;  // original video dimensions
var vid_h_orig;

jQuery(function() { // runs after DOM has loaded

  vid_w_orig = parseInt(jQuery('video').attr('width'));
  vid_h_orig = parseInt(jQuery('video').attr('height'));
  $('#debug').append("<p>DOM loaded</p>");

  jQuery(window).resize(function () { resizeToCover(); });
  jQuery(window).trigger('resize');
});

function resizeToCover() {
  // set the video viewport to the window size
  jQuery('#video-viewport').width(jQuery(window).width());
  jQuery('#video-viewport').height(jQuery(window).height());

  // use largest scale factor of horizontal/vertical
  var scale_h = jQuery(window).width() / vid_w_orig;
  var scale_v = jQuery(window).height() / vid_h_orig;
  var scale = scale_h > scale_v ? scale_h : scale_v;

  // don't allow scaled width < minimum video width
  if (scale * vid_w_orig < min_w) {scale = min_w / vid_w_orig;};

  // now scale the video
  jQuery('video').width(scale * vid_w_orig);
  jQuery('video').height(scale * vid_h_orig);
  // and center it by scrolling the video viewport
  jQuery('#video-viewport').scrollLeft((jQuery('video').width() - jQuery(window).width()) / 2);
  jQuery('#video-viewport').scrollTop((jQuery('video').height() - jQuery(window).height()) / 2);

  // debug output
  jQuery('#debug').html("<p>win_w: " + jQuery(window).width() + "</p>");
  jQuery('#debug').append("<p>win_h: " + jQuery(window).height() + "</p>");
  jQuery('#debug').append("<p>viewport_w: " + jQuery('#video-viewport').width() + "</p>");
  jQuery('#debug').append("<p>viewport_h: " + jQuery('#video-viewport').height() + "</p>");
  jQuery('#debug').append("<p>video_w: " + jQuery('video').width() + "</p>");
  jQuery('#debug').append("<p>video_h: " + jQuery('video').height() + "</p>");
  jQuery('#debug').append("<p>vid_w_orig: " + vid_w_orig + "</p>");
  jQuery('#debug').append("<p>vid_h_orig: " + vid_h_orig + "</p>");
  jQuery('#debug').append("<p>scale: " + scale + "</p>");
};

#video-viewport {
  position: absolute;
  top: 0;
  overflow: hidden;
  z-index: -1; /* for accessing the video by click */
}

#debug {
  position: absolute;
  top: 0;
  z-index: 100;
  color: #fff;
  font-size: 12pt;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="video-viewport">
  <video autoplay controls preload width="640" height="360">
    <source src="http://www.quirksmode.org/html5/videos/big_buck_bunny.mp4"type="video/mp4" />
    <source src="http://www.quirksmode.org/html5/videos/big_buck_bunny.webm"type="video/webm" />
    <source src="http://www.quirksmode.org/html5/videos/big_buck_bunny.ogv"type="video/webm" />
  </video>
</div>

<div id="debug"></div>

Answer 5

其他答案很好,但它们涉及javascript或他们没有水平和垂直居中视频.

您可以使用此完整的CSS解决方案来制作模拟background-size:cover属性的视频:

  video {
    position: fixed;           // Make it full screen (fixed)
    right: 0;
    bottom: 0;
    z-index: -1;               // Put on background

    min-width: 100%;           // Expand video
    min-height: 100%;
    width: auto;               // Keep aspect ratio
    height: auto;

    top: 50%;                  // Vertical center offset
    left: 50%;                 // Horizontal center offset

    -webkit-transform: translate(-50%,-50%);
    -moz-transform: translate(-50%,-50%);
    -ms-transform: translate(-50%,-50%);
    transform: translate(-50%,-50%);         // Cover effect: compensate the offset

    background: url(bkg.jpg) no-repeat;      // Background placeholder, not always needed
    background-size: cover;
  }

Answer 6

M-Pixel的解决方案很棒,因为它解决了Timothy答案的缩放问题(视频会向上扩展但不会缩小,所以如果你的视频非常大,那么很有可能你只会看到一小部分缩放).但是,该解决方案基于与视频容器大小相关的错误假设,即它必须是视口宽度和高度的100%.我发现了一些不适合我的案例,所以我决定自己解决这个问题,我相信我想出了最终的解决方案.

HTML

<div class="parent-container">
    <div class="video-container">
        <video width="1920" height="1080" preload="auto" autoplay loop>
            <source src="video.mp4" type="video/mp4">
        </video>
    </div>
</div>

CSS

.parent-container {
  /* any width or height */
  position: relative;
  overflow: hidden;
}
.video-container {
  width: 100%;
  min-height: 100%;
  position: absolute;
  left: 0px;
  /* center vertically */
  top: 50%;
  -moz-transform: translate(0%, -50%);
  -ms-transform: translate(0%, -50%);
  -webkit-transform: translate(0%, -50%);
  transform: translate(0%, -50%);
}
.video-container::before {
  content: "";
  display: block;
  height: 0px;
  padding-bottom: 56.25%; /* 100% * 9 / 16 */
}
.video-container video {
  width: auto;
  height: 100%;
  position: absolute;
  top: 0px;
  /* center horizontally */
  left: 50%;
  -moz-transform: translate(-50%, 0%);
  -ms-transform: translate(-50%, 0%);
  -webkit-transform: translate(-50%, 0%);
  transform: translate(-50%, 0%);
}

它也是基于视频的比例,因此如果您的视频的比率不是16/9,您将需要更改padding-bottom%.除此之外,它开箱即用.在IE9 +,Safari 9.0.1,Chrome 46和Firefox 41中测试过.

编辑(2016年3月17日)

由于我张贴了这个答案我写了一个小的CSS模块来模拟background-size: cover和background-size: contain对<video>元素:http://codepen.io/benface/pen/NNdBMj

它支持视频的不同对齐(类似于background-position).另请注意,contain实施并不完美.不同的是background-size: contain,如果容器的宽度和高度更大,它将不会将视频缩放超过其实际大小,但我认为它在某些情况下仍然有用.我还添加了特殊的fill-width和fill-height可以一起使用类contain来获取的特殊组合contain和cover......尝试一下,并随时改进它!

Answer 7

根据Daniel de Wit的回答和评论，我进行了更多搜索。感谢他的解决方案。

解决方案是使用object-fit: cover;具有强大支持的工具（每个人现代的浏览器都支持它）。如果您真的想支持IE，则可以使用诸如object-fit-images或object-fit之类的polyfill 。

演示：

img {
  float: left;
  width: 100px;
  height: 80px;
  border: 1px solid black;
  margin-right: 1em;
}
.fill {
  object-fit: fill;
}
.contain {
  object-fit: contain;
}
.cover {
  object-fit: cover;
}
.none {
  object-fit: none;
}
.scale-down {
  object-fit: scale-down;
}

<img class="fill" src="http://www.peppercarrot.com/data/wiki/medias/img/chara_carrot.jpg"/>
<img class="contain" src="http://www.peppercarrot.com/data/wiki/medias/img/chara_carrot.jpg"/>
<img class="cover" src="http://www.peppercarrot.com/data/wiki/medias/img/chara_carrot.jpg"/>
<img class="none" src="http://www.peppercarrot.com/data/wiki/medias/img/chara_carrot.jpg"/>
<img class="scale-down" src="http://www.peppercarrot.com/data/wiki/medias/img/chara_carrot.jpg"/>

和父母一起：

div {
  float: left;
  width: 100px;
  height: 80px;
  border: 1px solid black;
  margin-right: 1em;
}
img {
  width: 100%;
  height: 100%;
}
.fill {
  object-fit: fill;
}
.contain {
  object-fit: contain;
}
.cover {
  object-fit: cover;
}
.none {
  object-fit: none;
}
.scale-down {
  object-fit: scale-down;
}

<div>
<img class="fill" src="http://www.peppercarrot.com/data/wiki/medias/img/chara_carrot.jpg"/>
</div><div>
<img class="contain" src="http://www.peppercarrot.com/data/wiki/medias/img/chara_carrot.jpg"/>
</div><div>
<img class="cover" src="http://www.peppercarrot.com/data/wiki/medias/img/chara_carrot.jpg"/>
</div><div>
<img class="none" src="http://www.peppercarrot.com/data/wiki/medias/img/chara_carrot.jpg"/>
</div><div>
<img class="scale-down" src="http://www.peppercarrot.com/data/wiki/medias/img/chara_carrot.jpg"/>
</div>

Answer 8

object-fit: cover 这个IE Safari的polyfill是最好的答案。

https://github.com/constancecchen/object-fit-polyfill

它支撑img，video和picture元件。