Hintergrundgröße simulieren: Cover auf <video> oder <img>

Wie kann ich die Funktionalität background-size:covereines HTML-Elements wie <video>oder simulieren <img>?

Ich möchte, dass es so funktioniert

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

Dies ist etwas, über das ich mir eine Weile die Haare ausgezogen habe, aber ich bin auf eine großartige Lösung gestoßen, die kein Skript verwendet und mit 5 Zeilen CSS eine perfekte Cover-Simulation auf Video erzielen kann (9, wenn Sie Selektoren und Klammern zählen ). Dies hat 0 Randfälle, in denen es nicht perfekt funktioniert, abgesehen von CSS3-Kompatibilität .

Sie können ein Beispiel siehe hier

Das Problem mit Timothys Lösung ist, dass die Skalierung nicht richtig funktioniert. Wenn das umgebende Element kleiner als die Videodatei ist, wird es nicht verkleinert. Selbst wenn Sie dem Video-Tag eine winzige Anfangsgröße wie 16 x 9 Pixel geben, autowird es auf ein Minimum seiner nativen Dateigröße gezwungen. Mit der derzeit am besten bewerteten Lösung auf dieser Seite war es mir unmöglich, die Videodatei zu verkleinern, was zu einem drastischen Zoomeffekt führte.

Wenn das Seitenverhältnis Ihres Videos jedoch bekannt ist, z. B. 16: 9, können Sie Folgendes tun:

.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 */
}

Wenn das übergeordnete Element des Videos so eingestellt ist, dass es die gesamte Seite abdeckt (z. B. position: fixed; width: 100%; height: 100vh;), wird auch das Video angezeigt.

Wenn Sie das Video auch zentrieren möchten, können Sie den todsicheren Zentrierungsansatz verwenden:

/* 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 */
}

Natürlich vw, vhund transformsind CSS3, also , wenn Sie brauchen Kompatibilität mit vielen älteren Browsern , werden Sie zu verwenden Skript benötigen.

jsFiddle

Die Verwendung der Hintergrundabdeckung ist für Bilder in Ordnung, ebenso wie die Breite 100%. Diese sind nicht optimal für <video>und diese Antworten sind zu kompliziert. Sie benötigen weder jQuery noch JavaScript, um einen Videohintergrund in voller Breite zu erstellen.

Denken Sie daran, dass mein Code einen Hintergrund nicht vollständig mit einem Video wie das Cover abdeckt, sondern das Video so groß macht, wie es sein muss, um das Seitenverhältnis beizubehalten und dennoch den gesamten Hintergrund abzudecken. Überschüssiges Video wird am Seitenrand ausgeblutet. Welche Seiten davon abhängen, wo Sie das Video verankern.

Die Antwort ist ganz einfach.

Verwenden Sie einfach diesen HTML5-Videocode oder etwas in dieser Richtung: (Test auf der ganzen Seite)

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>

Durch die minimale Höhe und minimale Breite kann das Video das Seitenverhältnis des Videos beibehalten, das normalerweise das Seitenverhältnis eines normalen Browsers bei einer normalen Auflösung ist. Überschüssiges Video wird an der Seite der Seite ausgeblutet.

Für einige Browser können Sie verwenden

object-fit: cover;

http://caniuse.com/object-fit

So habe ich das gemacht. Ein funktionierendes Beispiel finden Sie in dieser 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>

Die anderen Antworten waren gut, aber sie beinhalten Javascript oder sie zentrieren das Video nicht horizontal UND vertikal.

Mit dieser vollständigen CSS-Lösung können Sie ein Video erstellen, das die Hintergrundgröße simuliert: cover property:

  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;
  }

Aufgrund der Antwort und der Kommentare von Daniel de Wit habe ich etwas mehr gesucht. Danke an ihn für die Lösung.

Die Lösung besteht darin, object-fit: cover;eine großartige Unterstützung zu verwenden (jeder moderne Browser unterstützt sie). Wenn Sie IE wirklich unterstützen möchten, können Sie eine Polyfüllung wie Objektanpassungsbilder oder Objektanpassung verwenden .

Demos:

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"/>

und mit einem Elternteil:

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>

Die Lösung von M-Pixel ist insofern großartig, als sie das Skalierungsproblem von Timothys Antwort löst (das Video wird vergrößert, aber nicht verkleinert. Wenn Ihr Video also wirklich groß ist, besteht eine gute Chance, dass Sie nur einen kleinen Teil davon vergrößert sehen). Diese Lösung basiert jedoch auf falschen Annahmen in Bezug auf die Größe des Videocontainers, nämlich dass sie notwendigerweise 100% der Breite und Höhe des Ansichtsfensters beträgt. Ich habe einige Fälle gefunden, in denen es bei mir nicht funktioniert hat, und habe mich daher entschlossen, das Problem selbst anzugehen. Ich glaube, ich habe die ultimative Lösung gefunden .

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%);
}

Es basiert auch auf dem Verhältnis des Videos. Wenn Ihr Video also ein anderes Verhältnis als 16/9 hat, möchten Sie das Padding-Bottom% ändern. Davon abgesehen funktioniert es sofort. Getestet in IE9 +, Safari 9.0.1, Chrome 46 und Firefox 41.

BEARBEITEN (17. März 2016)

Da ich diese Antwort gepostet habe ich ein kleines CSS - Modul geschrieben sowohl zu simulieren background-size: coverund background-size: containauf <video>Elemente: http://codepen.io/benface/pen/NNdBMj

Es unterstützt verschiedene Ausrichtungen für das Video (ähnlich wie background-position). Beachten Sie auch, dass die containImplementierung nicht perfekt ist. Im Gegensatz background-size: containdazu wird das Video nicht über seine tatsächliche Größe hinaus skaliert, wenn die Breite und Höhe des Containers größer sind, aber ich denke, dass es in einigen Fällen immer noch nützlich sein kann. Ich habe auch Specials fill-widthund fill-heightKlassen hinzugefügt , mit denen Sie zusammen containeine spezielle Mischung aus containund cover... ausprobieren können, und Sie können sie jederzeit verbessern!

object-fit: cover ist die beste Antwort mit diesem IE, Safari Polyfill.

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

Sie unterstützt img, videound pictureElemente.

CSS und kleine js können das Video den Hintergrund abdecken und horizontal zentrieren.

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: (Binden Sie dies mit Fenstergröße ändern und rufen Sie einmal separat auf)

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

Gleich nach unserem langen Kommentarbereich denke ich, dass dies das ist, wonach Sie suchen. Es basiert auf 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;
}

Der obige Code verwendet die Breite und Höhe des Browsers. Wenn Sie dies innerhalb eines Div tun, müssen Sie ihn in etwa Folgendes ändern:

Für 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;
}

Ich sollte auch sagen, dass ich nur getestet habe, dass dies Google Chrome ist ... hier ist eine jsfiddle: http://jsfiddle.net/ADCKk/

Die Top-Antwort verkleinert das Video nicht, wenn Sie Browserbreiten haben, die kleiner als die Breite Ihres Videos sind. Versuchen Sie es mit diesem CSS (wobei #bgvid die ID Ihres Videos ist):

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

Ich bin Gunna Post diese Lösung auch, da ich dieses Problem hatte, aber die anderen Lösungen funktionierten nicht für meine Situation ...

Ich denke, um die background-size:cover;CSS-Eigenschaft für ein Element anstelle einer Element-Hintergrundbild-Eigenschaft richtig zu simulieren, müssten Sie das Bildseitenverhältnis mit dem aktuellen Windows-Seitenverhältnis vergleichen, also unabhängig von der Größe (und auch für den Fall, dass das Bild ist) größer als breiter) das fenster ist das element füllt das fenster (und zentriert es auch, obwohl ich nicht weiß, ob das eine anforderung war) ....

Ich bin mir sicher, dass die Verwendung eines Bildes der Einfachheit halber auch ein Videoelement funktionieren würde.

Rufen Sie zuerst das Seitenverhältnis der Elemente ab (sobald es geladen ist), hängen Sie dann den Fenstergrößenänderungs-Handler an und lösen Sie ihn einmal für die anfängliche Größenänderung aus:

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

Anschließend sollten Sie in Ihrem Größenänderungs-Handler zunächst bestimmen, ob die Breite oder die Füllhöhe gefüllt werden soll, indem Sie das aktuelle Seitenverhältnis des Fensters mit dem ursprünglichen Seitenverhältnis des Bildes vergleichen.

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";
}

}}

Dieser Ansatz verwendet nur CSS und HTML. Sie können tatsächlich einfach ein Divs unter dem Video stapeln. Es ist abgedeckt, aber nicht zentriert, während Sie die Größe ändern.

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*/ 
}

@ Versteckte Hobbes

Diese Frage hat ein offenes Kopfgeld von +100 Ruf von Hidden Hobbes, das in 6 Tagen endet. Erfinderische Verwendung von Ansichtsfenstereinheiten, um eine flexible CSS-Lösung zu erhalten.

Sie haben eine Prämie für diese Frage für eine reine CSS-Lösung eröffnet, daher werde ich es versuchen. Meine Lösung für ein solches Problem besteht darin, ein festes Verhältnis zu verwenden, um die Höhe und Breite des Videos zu bestimmen. Normalerweise verwende ich Bootstrap, aber ich habe das erforderliche CSS von dort extrahiert, damit es ohne funktioniert. Dies ist ein Code, den ich früher verwendet habe, um unter anderem ein eingebettetes Video mit dem richtigen Verhältnis zu zentrieren. Es sollte auch für <video>und <img>Elemente funktionieren. Es ist das oberste, das hier relevant ist, aber ich habe Ihnen auch die anderen beiden gegeben, da ich sie bereits herumliegen hatte. Viel Glück! :) :)

jsfiddle Vollbild Beispiel

.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>

Um den Kommentar von beantworten weotch dass Timothy Ryan Carpenter ‚s Antwort nicht für nicht - Konto covers‘ Zentrieren des Hintergrunds, biete ich diese schnelle CSS fix:

CSS:

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

Durch Hinzufügen dieser beiden Zeilen wird jedes Element zentriert. Noch besser ist, dass alle Browser, die HTML5-Videos verarbeiten können, auch CSS3-Transformationen unterstützen, sodass dies immer funktioniert.

Das komplette CSS sieht so aus.

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

Ich hätte Timothys Antwort direkt kommentiert, aber ich habe nicht genug Ruf, um dies zu tun.

Leute, ich habe eine bessere Lösung, es ist kurz und funktioniert perfekt für mich. Ich habe es für Videos verwendet. Und es emuliert perfekt die Cover-Option in CSS.

Javascript

    $(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%");
            }
    });

Wenn Sie das if umdrehen, werden Sie enthalten.

Und hier ist die CSS. (Sie müssen es nicht verwenden, wenn Sie keine Mittelpositionierung wünschen. Das übergeordnete Div muss " position: relative " sein.)

CSS

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

Ich habe das gerade gelöst und wollte teilen. Dies funktioniert mit Bootstrap 4. Es funktioniert mit, imgaber ich habe es nicht mit getestet video. Hier ist die HAML und 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>

Alte Frage, aber falls jemand dies sieht, ist meiner Meinung nach die beste Antwort, das Video in ein animiertes GIF umzuwandeln. Dies gibt Ihnen viel mehr Kontrolle und Sie können es einfach wie ein Bild behandeln. Dies ist auch die einzige Möglichkeit, auf Mobilgeräten zu arbeiten, da Sie Videos nicht automatisch abspielen können. Ich weiß, dass die Frage darin besteht, es in einem <img>Tag zu tun , aber ich sehe nicht wirklich den Nachteil, ein <div>und zu tunbackground-size: cover