模拟背景大小：在<video>或<img>上显示

如何background-size:cover在html元素（例如<video>或）上模拟的功能<img>？

我希望它像

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

这是我花了一段时间的努力，但我遇到了一个不使用任何脚本的出色解决方案，并且可以使用5行CSS（如果算上选择器和括号，则为9行）可以对视频进行完美的封面模拟）。缺少CSS3-compatibility，它有0个无法完美工作的边缘情况。

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

Timothy解决方案的问题在于，它无法正确处理缩放比例。如果周围的元素小于视频文件，则不会按比例缩小。即使您为视频标签指定了一个很小的初始大小（如16px x 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;），那么视频也将覆盖。

如果您还希望视频居中，则可以使用surefire居中方法：

/* 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，所以如果你需要用多少旧的浏览器兼容，你需要使用脚本。

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>

最小高度和最小宽度将使视频保持视频的长宽比，通常是任何普通浏览器在正常分辨率下的长宽比。任何多余的视频都会从页面侧面渗出。

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

object-fit: cover;

http://caniuse.com/object-fit

这是我的方法。一个有效的示例在此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>

其他答案很好，但是它们涉及到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;
  }

根据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>

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，则需要更改底部填充百分比。除此之外，它开箱即用。在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尝试一下，并随时进行改进！

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

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

它支撑img，video和picture元件。

CSS和小js可以使视频覆盖背景并水平居中。

CSS：

video#bgvid {
    position: absolute;
    bottom: 0px; 
    left: 50%; 
    min-width: 100%; 
    min-height: 100%; 
    width: auto; 
    height: auto; 
    z-index: -1; 
    overflow: hidden;
}

JS ：（将其与窗口调整大小绑定并分别调用一次）

$('#bgvid').css({
    marginLeft : '-' + ($('#bgvid').width()/2) + 'px'
})

在我们的长评论部分之后，我想这就是您要寻找的，它基于jQuery：

HTML：

<img width="100%" id="img" src="http://uploads8.wikipaintings.org/images/william-adolphe-bouguereau/self-portrait-presented-to-m-sage-1886.jpg">

JS：

<script type="text/javascript">
window.onload = function(){
       var img = document.getElementById('img')
       if(img.clientHeight<$(window).height()){
            img.style.height=$(window).height()+"px";
       }
       if(img.clientWidth<$(window).width()){
            img.style.width=$(window).width()+"px";
       } 
}
​</script>​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​

CSS：

body{
    overflow: hidden;
}

``如果您在div中执行此操作，则上面的代码将使用浏览器的宽度和高度，您必须将其更改为如下所示：

对于Div：

HTML：

<div style="width:100px; max-height: 100px;" id="div">
     <img width="100%" id="img" src="http://uploads8.wikipaintings.org/images/william-adolphe-bouguereau/self-portrait-presented-to-m-sage-1886.jpg">
</div>

JS：

<script type="text/javascript">
window.onload = function(){
       var img = document.getElementById('img')
       if(img.clientHeight<$('#div').height()){
            img.style.height=$('#div').height()+"px";
       }
       if(img.clientWidth<$('#div').width()){
            img.style.width=$('#div').width()+"px";
       } 
}
​</script>​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​

CSS：

div{
   overflow: hidden;
}

我还应该指出，我只测试了这是Google Chrome浏览器...这是一个jsfiddle：http : //jsfiddle.net/ADCKk/

当浏览器的宽度小于视频宽度时，最重要的答案不会按比例缩小视频。尝试使用此CSS（以#bgvid作为您的视频ID）：

#bgvid {
     position: fixed;
     top: 50%;
     left: 50%;
     min-width: 100%;
     min-height: 100%;
     width: auto;
     height: auto;
     transform: translateX(-50%) translateY(-50%);
     -webkit-transform: translateX(-50%) translateY(-50%);
}

我也是gunna发布此解决方案的，因为我遇到了这个问题，但其他解决方案对我的情况不起作用...

我认为要正确模拟background-size:cover;元素的css属性而不是元素的background-image属性，您必须将图像的长宽比与当前的Windows长宽比进行比较，因此无论大小如何（以及图片是否为高而不是宽）窗口是元素正在填充窗口（并居中，尽管我不知道这是否是必需的）...。

使用图像，只是为了简单起见，我确定视频元素也可以正常工作。

首先获取元素的宽高比（一旦加载），然后附加窗口大小调整处理程序，触发一次以进行初始大小调整：

var img = document.getElementById( "background-picture" ),
    imgAspectRatio;

img.onload = function() {
    // get images aspect ratio
    imgAspectRatio = this.height / this.width;
    // attach resize event and fire it once
    window.onresize = resizeBackground;
    window.onresize();
}

然后在尺寸调整处理程序中，您应该首先通过将窗口的当前纵横比与图像的原始纵横比进行比较来确定是填充宽度还是填充高度。

function resizeBackground( evt ) {

// get window size and aspect ratio
var windowWidth = window.innerWidth,
    windowHeight = window.innerHeight;
    windowAspectRatio = windowHeight / windowWidth;

//compare window ratio to image ratio so you know which way the image should fill
if ( windowAspectRatio < imgAspectRatio ) {
    // we are fill width
    img.style.width = windowWidth + "px";
    // and applying the correct aspect to the height now
    img.style.height = (windowWidth * imgAspectRatio) + "px";
    // this can be margin if your element is not positioned relatively, absolutely or fixed
    // make sure image is always centered
    img.style.left = "0px";
    img.style.top = (windowHeight - (windowWidth * imgAspectRatio)) / 2 + "px";
} else { // same thing as above but filling height instead
    img.style.height = windowHeight + "px";
    img.style.width = (windowHeight / imgAspectRatio) + "px";
    img.style.left = (windowWidth - (windowHeight / imgAspectRatio)) / 2 + "px";
    img.style.top = "0px";
}

}

这种方法仅使用css和html。实际上，您可以轻松地在视频下方堆叠div。调整大小时，它是有盖的，但没有居中。

HTML：

<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css"> 
</script>
</head>
<body>
<div id = "contain">
<div id="vid">
    <video autoplay>
        <source src="http://www.quirksmode.org/html5/videos/big_buck_bunny.mp4" type="video/mp4" />
    </video>
</div>
</div>
</body>
</html>

CCS：

/*
filename:style.css
*/
body {
    margin:0;
}

#vid video{
position: absolute; 
right: 0; 
top: 0;
min-width: 100%; 
min-height: 100%;
width: auto; 
height: auto; 
}

#contain {
width:100%;
height:100%;
zoom:1%;/*Without this the video will be stretched and skewed*/ 
}

隐藏的霍布斯

这个问题有悬赏悬赏，其隐藏的霍布斯的身分得到+100的声望，并在6天内结束。创造性地使用视口单元以获得仅CSS的灵活解决方案。

您为这个仅CSS解决方案的问题悬赏了，所以我将尝试一下。我对此类问题的解决方案是使用固定比例确定视频的高度和宽度。我通常使用Bootstrap，但是我从那里提取了必要的CSS，以使其无法工作。这是我之前使用的代码，主要用于使嵌入视频具有正确的比率。它也应该适用于<video>和<img>元素这是最相关的一个，但是我也给了你另外两个，因为我已经把它们放在一起了。祝你好运！:)

jsfiddle全屏示例

.embeddedContent.centeredContent {
    margin: 0px auto;
}
.embeddedContent.rightAlignedContent {
    margin: auto 0px auto auto;
}
.embeddedContent > .embeddedInnerWrapper {
    position:relative;
    display: block;
    padding: 0;
    padding-top: 42.8571%; /* 21:9 ratio */
}
.embeddedContent > .embeddedInnerWrapper > iframe {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    height: 100%;
    width: 100%;
    border: 0;
}
.embeddedContent {
    max-width: 300px;
}
.box1text {
    background-color: red;
}
/* snippet from Bootstrap */
.container {
    margin-right: auto;
    margin-left: auto;
}
.col-md-12 {
    width: 100%;
}

<div class="container">
    <div class="row">
        <div class="col-md-12">
            Testing ratio AND left/right/center align:<br />
            <div class="box1text">
                <div class="embeddedContent centeredContent">
                    <div class="embeddedInnerWrapper">
                        <iframe allowfullscreen="true" allowscriptaccess="always" frameborder="0" height="349" scrolling="no" src="//www.youtube.com/embed/u6XAPnuFjJc?wmode=transparent&amp;jqoemcache=eE9xf" width="425"></iframe>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<div class="container">
    <div class="row">
        <div class="col-md-12">
            Testing ratio AND left/right/center align:<br />
            <div class="box1text">
                <div class="embeddedContent rightAlignedContent">
                    <div class="embeddedInnerWrapper">
                        <iframe allowfullscreen="true" allowscriptaccess="always" frameborder="0" height="349" scrolling="no" src="//www.youtube.com/embed/u6XAPnuFjJc?wmode=transparent&amp;jqoemcache=eE9xf" width="425"></iframe>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<div class="container">
    <div class="row">
        <div class="col-md-12">
            Testing ratio AND left/right/center align:<br />
            <div class="box1text">
                <div class="embeddedContent">
                    <div class="embeddedInnerWrapper">
                        <iframe allowfullscreen="true" allowscriptaccess="always" frameborder="0" height="349" scrolling="no" src="//www.youtube.com/embed/u6XAPnuFjJc?wmode=transparent&amp;jqoemcache=eE9xf" width="425"></iframe>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

为了回答weotch的评论，蒂莫西·赖安·卡彭特（Timothy Ryan Carpenter）的回答没有考虑cover到背景的居中，我提供了此CSS快速修复程序：

CSS：

margin-left: 50%;
transform: translateX(-50%);

将这两行相加将使任何元素居中。更好的是，所有可以处理HTML5视频的浏览器也都支持CSS3转换，因此这将始终有效。

完整的CSS如下所示。

#video-background { 
    position: absolute;
    bottom: 0px; 
    right: 0px; 
    min-width: 100%; 
    min-height: 100%; 
    width: auto; 
    height: auto; 
    z-index: -1000; 
    overflow: hidden;
    margin-left: 50%;
    transform: translateX(-50%);
}

我会直接对蒂莫西的回答发表评论，但我没有足够的声誉来评论。

伙计们，我有一个更好的解决方案，它对我的​​工作很完美。我用它来录像。并且它完美地模拟了CSS中的Cover选项。

Java脚本

    $(window).resize(function(){
            //use the aspect ration of your video or image instead 16/9
            if($(window).width()/$(window).height()>16/9){
                $("video").css("width","100%");
                $("video").css("height","auto");
            }
            else{
                $("video").css("width","auto");
                $("video").css("height","100%");
            }
    });

如果翻转if，否则将被包含。

这是CSS。（如果您不希望居中定位，则不需要使用它，父div必须为“ position：relative ”）

的CSS

video {
position: absolute;
-webkit-transform: translateX(-50%) translateY(-50%);
transform: translateX(-50%) translateY(-50%);
top: 50%;
left: 50%;}

我刚刚解决了这个问题，想分享。该功能适用​​于Bootstrap4。适用于Bootstrap 4，img但我并未对其进行测试video。这是HAML和SCSS

.container
  .detail-img.d-flex.align-items-center
    %img{src: 'http://placehold.it/1000x700'}

.detail-img { // simulate background: center/cover
  max-height: 400px;
  overflow: hidden;

  img {
    width: 100%;
  }
}

/* simulate background: center/cover */
.center-cover { 
  max-height: 400px;
  overflow: hidden;
  
}

.center-cover img {
    width: 100%;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
  <div class="center-cover d-flex align-items-center">
    <img src="http://placehold.it/1000x700">
  </div>
</div>

这是个老问题，但是如果有人看到了，我认为最好的答案是将视频转换为GIF动画。这给了您更多的控制权，您可以将其像图像一样对待。这也是在移动设备上运行的唯一方法，因为您无法自动播放视频。我知道问题是要在<img>标签中执行，但是我并没有真正看到使用a <div>和background-size: cover