blocks|key|559946|text|这就是我是如何做到的。一个有效的例子是在this+jsFiddle中。|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|559947|​|559948|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:+"+%2B+jQuery(window).width()+%2B+"</p>");
++jQuery('#debug').append("<p>win_h:+"+%2B+jQuery(window).height()+%2B+"</p>");
++jQuery('#debug').append("<p>viewport_w:+"+%2B+jQuery('#video-viewport').width()+%2B+"</p>");
++jQuery('#debug').append("<p>viewport_h:+"+%2B+jQuery('#video-viewport').height()+%2B+"</p>");
++jQuery('#debug').append("<p>video_w:+"+%2B+jQuery('video').width()+%2B+"</p>");
++jQuery('#debug').append("<p>video_h:+"+%2B+jQuery('video').height()+%2B+"</p>");
++jQuery('#debug').append("<p>vid_w_orig:+"+%2B+vid_w_orig+%2B+"</p>");
++jQuery('#debug').append("<p>vid_h_orig:+"+%2B+vid_h_orig+%2B+"</p>");
++jQuery('#debug').append("<p>scale:+"+%2B+scale+%2B+"</p>");
};|code-block|syntax|javascript|559949|#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;
}|559950|<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>|559951|559952|entityMap|0|LINK|mutability|MUTABLE|url|http://jsfiddle.net/GCtMm/^0|K|D|0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|X|8|@]|9|@$A|Y|B|Z|1|10]]|C|$]]|$1|D|3|E|5|6|7|11|8|@]|9|@]|C|$]]|$1|F|3|G|5|H|7|12|8|@]|9|@]|C|$I|J]]|$1|K|3|L|5|H|7|13|8|@]|9|@]|C|$I|J]]|$1|M|3|N|5|H|7|14|8|@]|9|@]|C|$I|J]]|$1|O|3|E|5|6|7|15|8|@]|9|@]|C|$]]|$1|P|3|-4|5|6|7|16|8|@]|9|@]|C|$]]]|Q|$R|$5|S|T|U|C|$V|W]]]]

<p>Here's how I did this. A working example is in <a href="http://jsfiddle.net/GCtMm/" rel="nofollow noreferrer">this jsFiddle</a>.</p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>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("&lt;p&gt;DOM loaded&lt;/p&gt;");

  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 &gt; scale_v ? scale_h : scale_v;

  // don't allow scaled width &lt; minimum video width
  if (scale * vid_w_orig &lt; 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("&lt;p&gt;win_w: " + jQuery(window).width() + "&lt;/p&gt;");
  jQuery('#debug').append("&lt;p&gt;win_h: " + jQuery(window).height() + "&lt;/p&gt;");
  jQuery('#debug').append("&lt;p&gt;viewport_w: " + jQuery('#video-viewport').width() + "&lt;/p&gt;");
  jQuery('#debug').append("&lt;p&gt;viewport_h: " + jQuery('#video-viewport').height() + "&lt;/p&gt;");
  jQuery('#debug').append("&lt;p&gt;video_w: " + jQuery('video').width() + "&lt;/p&gt;");
  jQuery('#debug').append("&lt;p&gt;video_h: " + jQuery('video').height() + "&lt;/p&gt;");
  jQuery('#debug').append("&lt;p&gt;vid_w_orig: " + vid_w_orig + "&lt;/p&gt;");
  jQuery('#debug').append("&lt;p&gt;vid_h_orig: " + vid_h_orig + "&lt;/p&gt;");
  jQuery('#debug').append("&lt;p&gt;scale: " + scale + "&lt;/p&gt;");
};</code></pre>
<pre class="snippet-code-css lang-css prettyprint-override"><code>#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;
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt;
&lt;div id="video-viewport"&gt;
  &lt;video autoplay controls preload width="640" height="360"&gt;
    &lt;source src="http://www.quirksmode.org/html5/videos/big_buck_bunny.mp4"type="video/mp4" /&gt;
    &lt;source src="http://www.quirksmode.org/html5/videos/big_buck_bunny.webm"type="video/webm" /&gt;
    &lt;source src="http://www.quirksmode.org/html5/videos/big_buck_bunny.ogv"type="video/webm" /&gt;
  &lt;/video&gt;
&lt;/div&gt;

&lt;div id="debug"&gt;&lt;/div&gt;</code></pre>
</div>
</div>
</p>


blocks|key|344088|text|我也发布了这个解决方案，因为我有这个问题，但其他解决方案对我的情况不起作用……|type|unstyled|depth|inlineStyleRanges|entityRanges|data|344089|我认为要正确地模拟元素的background-size:cover;+css属性，而不是元素的背景图像属性，您必须将图像的纵横比与当前窗口的纵横比进行比较，所以无论大小如何(如果图像比宽更高)，窗口都是填充窗口的元素(并且居中，尽管我不知道这是否是必需的)。|offset|length|style|CODE|344090|使用图像，只是为了简单起见，我相信视频元素也可以很好地工作。|344091|首先获取元素的纵横比(加载后)，然后附加窗口调整大小处理程序，触发一次以进行初始大小调整：|344092|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();
}|code-block|syntax|javascript|344093|然后，在调整大小处理程序中，您应该首先通过比较窗口的当前纵横比和图像的原始纵横比来确定是填充宽度还是填充高度。|344094|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+%2B+"px";
++++//+and+applying+the+correct+aspect+to+the+height+now
++++img.style.height+=+(windowWidth+*+imgAspectRatio)+%2B+"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+%2B+"px";
}+else+{+//+same+thing+as+above+but+filling+height+instead
++++img.style.height+=+windowHeight+%2B+"px";
++++img.style.width+=+(windowHeight+/+imgAspectRatio)+%2B+"px";
++++img.style.left+=+(windowWidth+-+(windowHeight+/+imgAspectRatio))+/+2+%2B+"px";
++++img.style.top+=+"0px";
}|344095|}|344096|entityMap^0|0|C|M|0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|Y|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|Z|8|@$D|10|E|11|F|G]]|9|@]|A|$]]|$1|H|3|I|5|6|7|12|8|@]|9|@]|A|$]]|$1|J|3|K|5|6|7|13|8|@]|9|@]|A|$]]|$1|L|3|M|5|N|7|14|8|@]|9|@]|A|$O|P]]|$1|Q|3|R|5|6|7|15|8|@]|9|@]|A|$]]|$1|S|3|T|5|N|7|16|8|@]|9|@]|A|$O|P]]|$1|U|3|V|5|6|7|17|8|@]|9|@]|A|$]]|$1|W|3|-4|5|6|7|18|8|@]|9|@]|A|$]]]|X|$]]

<p>i'm gunna post this solution as well, since i had this problem but the other solutions did not work for my situation...</p>

<p>i think to properly simulate the <code>background-size:cover;</code> css property on an element instead of an elements background-image property, you'd have to compare the images aspect ratio to the current windows aspect ratio, so no matter what size (and also in case the image is taller than wider) the window is the element is filling the window (and also centering it, though i don't know if that was a requirement)....</p>

<p>using an image, just for simplicity's sake, i'm sure a video element would work fine too.</p>

<p>first get the elements aspect ratio (once it's loaded), then attach the window resize handler, trigger it once for initial sizing:</p>

<pre><code>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();
}
</code></pre>

<p>then in your resize handler you should first determine whether to fill width or fill height by comparing the window's current aspect ratio to the image's original aspect ratio.</p>

<pre><code>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 &lt; 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";
}
</code></pre>

<p>}</p>


blocks|key|560154|text|jsFiddle|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|560155|使用背景覆盖可以很好地处理图像，宽度也是100%25。这些对于<video>来说并不是最优的，而且这些答案过于复杂。您不需要jQuery或JavaScript即可完成全宽视频背景。|style|CODE|560156|请记住，我的代码不会完全覆盖一个视频的背景，但它将使视频尽可能大，以保持宽高比，并仍然覆盖整个背景。任何多余的视频都会从页面边缘流失，页面边缘的大小取决于您锚定视频的位置。|560157|答案很简单。|560158|只需使用以下HTML5视频代码，或类似以下内容：(在完整页面中测试)|560159|​|560160|html,+body+{
++width:+100%25;+
++height:100%25;+
++overflow:hidden;
}

#vid{
++position:+absolute;
++top:+50%25;+
++left:+50%25;
++-webkit-transform:+translateX(-50%25)+translateY(-50%25);
++transform:+translateX(-50%25)+translateY(-50%25);
++min-width:+100%25;+
++min-height:+100%25;+
++width:+auto;+
++height:+auto;
++z-index:+-1000;+
++overflow:+hidden;
}|code-block|syntax|javascript|560161|<video+id="vid"+video+autobuffer+autoplay>
++<source+id="mp4"+src="http://grochtdreis.de/fuer-jsfiddle/video/sintel_trailer-480.mp4"+type="video/mp4">
</video>|560162|560163|最小高度和最小宽度将允许视频保持视频的宽高比，该宽高比通常是任何正常浏览器在正常分辨率下的宽高比。任何多余的视频都会从页面的一侧流失。|560164|entityMap|0|LINK|mutability|MUTABLE|url|https://jsfiddle.net/mirohristov/cxb5oe0y/^0|0|8|0|0|T|7|0|0|0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|17|8|@]|9|@$A|18|B|19|1|1A]]|C|$]]|$1|D|3|E|5|6|7|1B|8|@$A|1C|B|1D|F|G]]|9|@]|C|$]]|$1|H|3|I|5|6|7|1E|8|@]|9|@]|C|$]]|$1|J|3|K|5|6|7|1F|8|@]|9|@]|C|$]]|$1|L|3|M|5|6|7|1G|8|@]|9|@]|C|$]]|$1|N|3|O|5|6|7|1H|8|@]|9|@]|C|$]]|$1|P|3|Q|5|R|7|1I|8|@]|9|@]|C|$S|T]]|$1|U|3|V|5|R|7|1J|8|@]|9|@]|C|$S|T]]|$1|W|3|O|5|6|7|1K|8|@]|9|@]|C|$]]|$1|X|3|Y|5|6|7|1L|8|@]|9|@]|C|$]]|$1|Z|3|-4|5|6|7|1M|8|@]|9|@]|C|$]]]|10|$11|$5|12|13|14|C|$15|16]]]]

<h2><a href="https://jsfiddle.net/mirohristov/cxb5oe0y/" rel="noreferrer">jsFiddle</a></h2>

<p>Using background cover is fine for images, and so is width 100%. These are not optimal for <code>&lt;video&gt;</code>, and these answers are overly complicated. You do not need jQuery or JavaScript to accomplish a full width video background.</p>

<p>Keep in mind that my code will not cover a background completely with a video like cover will, but instead it will make the video as big as it needs to be to maintain aspect ratio and still cover the whole background. Any excess video will bleed off the page edge, which sides depend on where you anchor the video.         </p>

<p>The answer is quite simple.</p>

<p>Just use this HTML5 video code, or something along these lines: (test in Full Page)</p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-css lang-css prettyprint-override"><code>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;
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;video id="vid" video autobuffer autoplay&gt;
  &lt;source id="mp4" src="http://grochtdreis.de/fuer-jsfiddle/video/sintel_trailer-480.mp4" type="video/mp4"&gt;
&lt;/video&gt;</code></pre>
</div>
</div>
</p>

<p>The min-height and min-width will allow the video to maintain the aspect ratio of the video, which is usually the aspect ratio of any normal browser at a normal resolution. Any excess video bleeds off the side of the page.</p>


blocks|key|344212|text|对于某些浏览器，您可以使用|type|unstyled|depth|inlineStyleRanges|entityRanges|data|344213|object-fit:+cover;|code-block|syntax|javascript|344214|http://caniuse.com/object-fit|offset|length|344215|entityMap|0|LINK|mutability|MUTABLE|url^0|0|0|0|T|0|0^^$0|@$1|2|3|4|5|6|7|R|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|S|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|T|8|@]|9|@$I|U|J|V|1|W]]|A|$]]|$1|K|3|-4|5|6|7|X|8|@]|9|@]|A|$]]]|L|$M|$5|N|O|P|A|$Q|H]]]]

<p>For some browsers you can use</p>

<pre><code>object-fit: cover;
</code></pre>

<p><a href="http://caniuse.com/object-fit">http://caniuse.com/object-fit</a></p>


blocks|key|344254|text|CSS和小js可以使视频覆盖背景和水平居中。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|344255|CSS：|344256|video#bgvid+{
++++position:+absolute;
++++bottom:+0px;+
++++left:+50%25;+
++++min-width:+100%25;+
++++min-height:+100%25;+
++++width:+auto;+
++++height:+auto;+
++++z-index:+-1;+
++++overflow:+hidden;
}|code-block|syntax|javascript|344257|JS：(将其与窗口调整大小绑定，分别调用一次)|344258|$('#bgvid').css({
++++marginLeft+:+'-'+%2B+($('#bgvid').width()/2)+%2B+'px'
})|344259|entityMap^0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|O|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|P|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|Q|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|6|7|R|8|@]|9|@]|A|$]]|$1|K|3|L|5|F|7|S|8|@]|9|@]|A|$G|H]]|$1|M|3|-4|5|6|7|T|8|@]|9|@]|A|$]]]|N|$]]

<p>CSS and little js can make the video cover the background and horizontally centered.</p>

<p>CSS:</p>

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

<p>JS: (bind this with window resize and call once seperately)</p>

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


blocks|key|344352|text|为了回答来自weotch的评论，Timothy+Ryan+Carpenter的答案没有考虑到cover的背景居中，我提供了这个快速的CSS修复：|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|344353|CSS：|344354|margin-left:+50%25;
transform:+translateX(-50%25);|code-block|syntax|javascript|344355|添加这两行将使所有元素居中。更好的是，所有可以处理HTML5视频的浏览器都支持CSS3转换，因此这将始终有效。|344356|完整的CSS如下所示。|344357|#video-background+{+
++++position:+absolute;
++++bottom:+0px;+
++++right:+0px;+
++++min-width:+100%25;+
++++min-height:+100%25;+
++++width:+auto;+
++++height:+auto;+
++++z-index:+-1000;+
++++overflow:+hidden;
++++margin-left:+50%25;
++++transform:+translateX(-50%25);
}|344358|我会直接评论Timothy的回答，但我没有足够的名气来这么做。|344359|entityMap|0|LINK|mutability|MUTABLE|url|https://stackoverflow.com/users/59160/weotch|1|https://stackoverflow.com/users/2189256/timothy-ryan-carpenter^0|1A|5|6|6|0|G|M|1|0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|14|8|@$9|15|A|16|B|C]]|D|@$9|17|A|18|1|19]|$9|1A|A|1B|1|1C]]|E|$]]|$1|F|3|G|5|6|7|1D|8|@]|D|@]|E|$]]|$1|H|3|I|5|J|7|1E|8|@]|D|@]|E|$K|L]]|$1|M|3|N|5|6|7|1F|8|@]|D|@]|E|$]]|$1|O|3|P|5|6|7|1G|8|@]|D|@]|E|$]]|$1|Q|3|R|5|J|7|1H|8|@]|D|@]|E|$K|L]]|$1|S|3|T|5|6|7|1I|8|@]|D|@]|E|$]]|$1|U|3|-4|5|6|7|1J|8|@]|D|@]|E|$]]]|V|$W|$5|X|Y|Z|E|$10|11]]|12|$5|X|Y|Z|E|$10|13]]]]

<p>To answer the comment from <a href="https://stackoverflow.com/users/59160/weotch">weotch</a> that <a href="https://stackoverflow.com/users/2189256/timothy-ryan-carpenter">Timothy Ryan Carpenter</a>'s answer doesn't account for <code>cover</code>'s centering of the background, I offer this quick CSS fix:</p>

<p>CSS:</p>

<pre><code>margin-left: 50%;
transform: translateX(-50%);
</code></pre>

<p>Adding these two lines will center any element. Even better, all browsers that can handle HTML5 video also support CSS3 transformations, so this will always work.</p>

<p>The complete CSS looks like this.</p>

<pre><code>#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%);
}
</code></pre>

<p>I'd have commented directly on Timothy's answer, but I don't have enough reputation to do so.</p>


blocks|key|560410|text|其他的答案都很好，但它们涉及到了javascript，或者它们没有将视频水平和垂直居中。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|560411|您可以使用此完整的CSS解决方案来制作模拟background-size:+cover属性的视频：|560412|++video+{
++++position:+fixed;+++++++++++//+Make+it+full+screen+(fixed)
++++right:+0;
++++bottom:+0;
++++z-index:+-1;+++++++++++++++//+Put+on+background

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

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

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

++++background:+url(bkg.jpg)+no-repeat;++++++//+Background+placeholder,+not+always+needed
++++background-size:+cover;
++}|code-block|syntax|javascript|560413|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|K|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|L|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|M|8|@]|9|@]|A|$G|H]]|$1|I|3|-4|5|6|7|N|8|@]|9|@]|A|$]]]|J|$]]

<p>The other answers were good but they involve javascript or they doesn't center the video horizontally AND vertically.</p>

<p>You can use this full CSS solution to have a video that simulate the background-size: cover property:</p>

<pre><code>  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;
  }
</code></pre>


blocks|key|344577|text|基于Daniel+de+Wit's+answer和评论，我搜索了更多。感谢他的解决方案。|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|344578|解决方案是使用object-fit:+cover;，它有一个很棒的support+(每个现代浏览器都支持它)。如果你真的想支持IE，你可以使用像object-fit-images或object-fit这样的polyfill。|style|CODE|344579|演示：|344580|​|344581|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;
}|code-block|syntax|javascript|344582|<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"/>|344583|344584|并且有了父母：|344585|344586|div+{
++float:+left;
++width:+100px;
++height:+80px;
++border:+1px+solid+black;
++margin-right:+1em;
}
img+{
++width:+100%25;
++height:+100%25;
}
.fill+{
++object-fit:+fill;
}
.contain+{
++object-fit:+contain;
}
.cover+{
++object-fit:+cover;
}
.none+{
++object-fit:+none;
}
.scale-down+{
++object-fit:+scale-down;
}|344587|<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>|344588|344589|entityMap|0|LINK|mutability|MUTABLE|url|https://stackoverflow.com/a/25078803/1248177|1|http://caniuse.com/#feat=object-fit|2|https://github.com/bfred-it/object-fit-images/|3|https://github.com/anselmh/object-fit^0|2|M|0|0|7|I|X|7|1|20|H|2|2I|A|3|0|0|0|0|0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|1F|8|@]|9|@$A|1G|B|1H|1|1I]]|C|$]]|$1|D|3|E|5|6|7|1J|8|@$A|1K|B|1L|F|G]]|9|@$A|1M|B|1N|1|1O]|$A|1P|B|1Q|1|1R]|$A|1S|B|1T|1|1U]]|C|$]]|$1|H|3|I|5|6|7|1V|8|@]|9|@]|C|$]]|$1|J|3|K|5|6|7|1W|8|@]|9|@]|C|$]]|$1|L|3|M|5|N|7|1X|8|@]|9|@]|C|$O|P]]|$1|Q|3|R|5|N|7|1Y|8|@]|9|@]|C|$O|P]]|$1|S|3|K|5|6|7|1Z|8|@]|9|@]|C|$]]|$1|T|3|U|5|6|7|20|8|@]|9|@]|C|$]]|$1|V|3|K|5|6|7|21|8|@]|9|@]|C|$]]|$1|W|3|X|5|N|7|22|8|@]|9|@]|C|$O|P]]|$1|Y|3|Z|5|N|7|23|8|@]|9|@]|C|$O|P]]|$1|10|3|K|5|6|7|24|8|@]|9|@]|C|$]]|$1|11|3|-4|5|6|7|25|8|@]|9|@]|C|$]]]|12|$13|$5|14|15|16|C|$17|18]]|19|$5|14|15|16|C|$17|1A]]|1B|$5|14|15|16|C|$17|1C]]|1D|$5|14|15|16|C|$17|1E]]]]

<p>Based on <a href="https://stackoverflow.com/a/25078803/1248177">Daniel de Wit's answer</a> and comments, I searched a bit more. Thanks to him for the solution.</p>

<p>The solution is to use <code>object-fit: cover;</code> which has a great <a href="http://caniuse.com/#feat=object-fit" rel="noreferrer">support</a> (every modern browser support it). If you really want to support IE, you can use a polyfill like <a href="https://github.com/bfred-it/object-fit-images/" rel="noreferrer">object-fit-images</a> or <a href="https://github.com/anselmh/object-fit" rel="noreferrer">object-fit</a>.</p>

<p>Demos :</p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="false" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-css lang-css prettyprint-override"><code>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;
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;img class="fill" src="http://www.peppercarrot.com/data/wiki/medias/img/chara_carrot.jpg"/&gt;
&lt;img class="contain" src="http://www.peppercarrot.com/data/wiki/medias/img/chara_carrot.jpg"/&gt;
&lt;img class="cover" src="http://www.peppercarrot.com/data/wiki/medias/img/chara_carrot.jpg"/&gt;
&lt;img class="none" src="http://www.peppercarrot.com/data/wiki/medias/img/chara_carrot.jpg"/&gt;
&lt;img class="scale-down" src="http://www.peppercarrot.com/data/wiki/medias/img/chara_carrot.jpg"/&gt;</code></pre>
</div>
</div>
</p>

<p>and with a parent:</p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="false" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-css lang-css prettyprint-override"><code>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;
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div&gt;
&lt;img class="fill" src="http://www.peppercarrot.com/data/wiki/medias/img/chara_carrot.jpg"/&gt;
&lt;/div&gt;&lt;div&gt;
&lt;img class="contain" src="http://www.peppercarrot.com/data/wiki/medias/img/chara_carrot.jpg"/&gt;
&lt;/div&gt;&lt;div&gt;
&lt;img class="cover" src="http://www.peppercarrot.com/data/wiki/medias/img/chara_carrot.jpg"/&gt;
&lt;/div&gt;&lt;div&gt;
&lt;img class="none" src="http://www.peppercarrot.com/data/wiki/medias/img/chara_carrot.jpg"/&gt;
&lt;/div&gt;&lt;div&gt;
&lt;img class="scale-down" src="http://www.peppercarrot.com/data/wiki/medias/img/chara_carrot.jpg"/&gt;
&lt;/div&gt;</code></pre>
</div>
</div>
</p>


blocks|key|560598|text|当浏览器的宽度小于视频的宽度时，上面的答案不会缩小视频。尝试使用这个CSS+(+#bgvid是你视频的id)：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|560599|#bgvid+{
+++++position:+fixed;
+++++top:+50%25;
+++++left:+50%25;
+++++min-width:+100%25;
+++++min-height:+100%25;
+++++width:+auto;
+++++height:+auto;
+++++transform:+translateX(-50%25)+translateY(-50%25);
+++++-webkit-transform:+translateX(-50%25)+translateY(-50%25);
}|code-block|syntax|javascript|560600|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

<p>The top answer doesn't scale down the video when you're at browser widths of less than your video's width. Try using this CSS (with #bgvid being your video's id):</p>

<pre><code>#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%);
}
</code></pre>


blocks|key|344719|text|object-fit:+cover是这个IE的最佳答案，Safari+polyfill。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|344720|https://github.com/constancecchen/object-fit-polyfill|344721|它支持img、video和picture元素。|344722|entityMap|0|LINK|mutability|MUTABLE|url^0|0|H|0|0|1H|0|0|3|3|7|5|D|7|0^^$0|@$1|2|3|4|5|6|7|Q|8|@$9|R|A|S|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|T|8|@]|D|@$9|U|A|V|1|W]]|E|$]]|$1|H|3|I|5|6|7|X|8|@$9|Y|A|Z|B|C]|$9|10|A|11|B|C]|$9|12|A|13|B|C]]|D|@]|E|$]]|$1|J|3|-4|5|6|7|14|8|@]|D|@]|E|$]]]|K|$L|$5|M|N|O|E|$P|G]]]]

<p><code>object-fit: cover</code> is the best answer with this IE, Safari polyfill.</p>

<p><a href="https://github.com/constancecchen/object-fit-polyfill" rel="noreferrer">https://github.com/constancecchen/object-fit-polyfill</a></p>

<p>It is supporting <code>img</code>, <code>video</code> and <code>picture</code> elements.</p>


blocks|key|560758|text|我刚刚解决了这个问题，想和大家分享一下。这在Bootstrap4上运行，在img上运行，但我没有在video上测试它。这是HAML和SCSS|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|560759|HAML|560760|.container
++.detail-img.d-flex.align-items-center
++++%25img{src:+'http://placehold.it/1000x700'}|code-block|syntax|javascript|560761|SCSS|560762|.detail-img+{+//+simulate+background:+center/cover
++max-height:+400px;
++overflow:+hidden;

++img+{
++++width:+100%25;
++}
}|560763|​|560764|/*+simulate+background:+center/cover+*/
.center-cover+{+
++max-height:+400px;
++overflow:+hidden;
++
}

.center-cover+img+{
++++width:+100%25;
}|560765|<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>|560766|560767|entityMap^0|11|3|1D|5|0|0|4|0|0|0|4|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|Z|8|@$9|10|A|11|B|C]|$9|12|A|13|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|14|8|@$9|15|A|16|B|C]]|D|@]|E|$]]|$1|H|3|I|5|J|7|17|8|@]|D|@]|E|$K|L]]|$1|M|3|N|5|6|7|18|8|@$9|19|A|1A|B|C]]|D|@]|E|$]]|$1|O|3|P|5|J|7|1B|8|@]|D|@]|E|$K|L]]|$1|Q|3|R|5|6|7|1C|8|@]|D|@]|E|$]]|$1|S|3|T|5|J|7|1D|8|@]|D|@]|E|$K|L]]|$1|U|3|V|5|J|7|1E|8|@]|D|@]|E|$K|L]]|$1|W|3|R|5|6|7|1F|8|@]|D|@]|E|$]]|$1|X|3|-4|5|6|7|1G|8|@]|D|@]|E|$]]]|Y|$]]

<p>I just solved this and wanted to share. This works with Bootstrap 4. It works with <code>img</code> but I didn't test it with <code>video</code>. Here is the HAML and SCSS</p>

<code>HAML</code>

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

<code>SCSS</code>

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

  img {
    width: 100%;
  }
}
</code></pre>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-css lang-css prettyprint-override"><code>/* simulate background: center/cover */
.center-cover { 
  max-height: 400px;
  overflow: hidden;
  
}

.center-cover img {
    width: 100%;
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet"/&gt;
&lt;div class="container"&gt;
  &lt;div class="center-cover d-flex align-items-center"&gt;
    &lt;img src="http://placehold.it/1000x700"&gt;
  &lt;/div&gt;
&lt;/div&gt;</code></pre>
</div>
</div>
</p>


blocks|key|560856|text|老问题，但如果有人看到这一点，在我看来，最好的答案是将视频转换为动画GIF。这给了你更多的控制权，你可以像对待图像一样对待它。这也是它在移动设备上工作的唯一方式，因为你不能自动播放视频。我知道问题是要求在<img>标记中这样做，但我真的看不出使用<div>和做background-size:+cover的缺点|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|560857|entityMap^0|2U|5|3F|5|3M|M|0^^$0|@$1|2|3|4|5|6|7|H|8|@$9|I|A|J|B|C]|$9|K|A|L|B|C]|$9|M|A|N|B|C]]|D|@]|E|$]]|$1|F|3|-4|5|6|7|O|8|@]|D|@]|E|$]]]|G|$]]

<p>Old question, but in case anyone sees this, the best answer in my opinion is to convert the video into an animated GIF. This gives you much more control and you can just treat it like an image. It's also the only way for it to work on mobile, since you can't autoplay videos. I know the question is asking to do it in an <code>&lt;img&gt;</code> tag, but I don't really see the downside of using a <code>&lt;div&gt;</code> and doing <code>background-size: cover</code></p>


blocks|key|560896|text|我也有这个问题，我用下面的css解决了这个问题：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|560897|#video-container+{
++++overflow:+hidden;
}

#video{
++++width:+100%25;
++++position:absolute;+
++++top:+0;+
++++right:+0;+
++++z-index:+-1;+
}|code-block|syntax|javascript|560898|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

<p>I also had this issue and I solved this with the following css:</p>
<pre><code>#video-container {
    overflow: hidden;
}

#video{
    width: 100%;
    position:absolute; 
    top: 0; 
    right: 0; 
    z-index: -1; 
}
</code></pre>


<p>How can I simulate the functionality of <code>background-size:cover</code> on an html element like <code>&lt;video&gt;</code> or <code>&lt;img&gt;</code>?</p>

<p>I'd like it to work like</p>

<pre><code>background-size: cover;
background-position: center center;
</code></pre>


simulate background-size:cover on <video> or <img>

jQuery

HTML5

如何在<video>或<img>等html元素上模拟background-size:cover的功能我希望它像这样工作background-size: cover;background-position: center center;

问模拟背景-大小:在<video>或<img>上覆盖
EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问模拟背景-大小:在<video>或<img>上覆盖EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问模拟背景-大小:在<video>或<img>上覆盖
EN