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

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

}}