arka plan boyutunu simüle et: <video> veya <img> üzerindeki kapak

Veya background-size:covergibi bir html öğesinin işlevselliğini nasıl simüle edebilirim ?<video><img>

Onun gibi çalışmasını istiyorum

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

Bu, bir süredir saçlarımı çıkardım, ancak herhangi bir komut dosyası kullanmayan harika bir çözümle karşılaştım ve 5 satır CSS ile videoda mükemmel bir kapak simülasyonu elde edebilirim (seçicileri ve parantezleri sayarsanız 9 ). Bu, CSS3 uyumluluğundan yoksun, mükemmel çalışmadığı 0 uç durumdadır .

Burada bir örnek görebilirsiniz

Timothy'nin çözümü ile ilgili sorun, ölçeklendirmeyi doğru işlememesidir. Çevreleyen öğe video dosyasından daha küçükse, küçültülmez. Video etiketine 16px x 9px gibi küçük bir başlangıç ​​boyutu vermiş olsanız bile, autoonu en az yerel dosya boyutuna zorlar. Bu sayfadaki mevcut en iyi oy alan çözümle, video dosyasının ölçeğini küçültmek benim için büyük bir yakınlaştırma efekti elde etmek imkansızdı.

Ancak videonuzun en boy oranı biliniyorsa (16: 9 gibi) aşağıdakileri yapabilirsiniz:

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

Videonun üst öğesi tüm sayfayı kapsayacak şekilde ayarlanmışsa (örneğin position: fixed; width: 100%; height: 100vh;), video da olur.

Videonun da ortalanmasını istiyorsanız, emin ateşleme merkezleme yaklaşımını kullanabilirsiniz:

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

Tabii ki, vw, vh, ve transformeğer gerekiyorsa CSS3, bu nedenle çok daha eski tarayıcılar ile uyumluluk , use komut gerekir.

jsFiddle

Arka plan kapağının kullanılması resimler için uygundur ve genişlik% 100'dür. Bunlar için uygun değildir <video>ve bu cevaplar aşırı derecede karmaşıktır. Tam genişlikte bir video arka planı elde etmek için jQuery veya JavaScript'e ihtiyacınız yoktur.

Kodumun, kapak iradesi gibi bir videoyla tamamen bir arka planı kapsamayacağını unutmayın, ancak bunun yerine videoyu en boy oranını korumak ve yine de tüm arka planı kaplamak için olması gerektiği kadar büyük hale getirecektir. Fazla video varsa kenarları videonun nereye sabitlendiğine bağlı olan sayfa kenarından taşınır.

Cevap oldukça basit.

Bu HTML5 video kodunu veya şu satırlarda bir şey kullanın: (Tam Sayfada test edin)

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>

Minimum yükseklik ve minimum genişlik, videonun videonun en boy oranını korumasına olanak tanır; bu genellikle normal bir tarayıcının normal çözünürlükte en boy oranıdır. Fazla video varsa sayfanın kenarından taşar.

Bazı tarayıcılar için

object-fit: cover;

http://caniuse.com/object-fit

İşte böyle yaptım. Bu jsFiddle'da çalışan bir örnek var .

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>

Diğer cevaplar iyiydi ama javascript içeriyor ya da videoyu yatay VE dikey olarak ortalamıyorlar.

Arka plan boyutu: cover özelliğini simüle eden bir videoya sahip olmak için bu tam CSS çözümünü kullanabilirsiniz:

  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'in cevabı ve yorumlarına dayanarak biraz daha araştırdım. Çözüm için ona teşekkürler.

Çözüm, object-fit: cover;büyük bir desteği olan kullanmaktır (her modern tarayıcı bunu destekler). IE'yi gerçekten desteklemek istiyorsanız, nesne sığdırma görüntüleri veya nesne sığdırma gibi bir çoklu dolgu kullanabilirsiniz .

Demolar:

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

ve bir ebeveynle:

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'in çözümü , Timothy'nin cevabının ölçeklendirme sorununu çözmesi açısından harika (video büyüyecek, ancak küçülmeyecek, bu nedenle videonuz gerçekten büyükse, sadece küçük bir kısmı yakınlaştırılmış olarak görebilirsiniz). Bununla birlikte, bu çözüm video konteynerinin boyutuyla ilgili yanlış varsayımlara dayanmaktadır, yani mutlaka görünüm alanının genişliğinin ve yüksekliğinin% 100'üdür. Benim için işe yaramadığı birkaç vaka buldum, bu yüzden problemi kendim çözmeye karar verdim ve nihai çözüm bulduğuma inanıyorum .

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

Ayrıca videonun oranına da bağlıdır, bu nedenle videonuzda 16/9 dışında bir oran varsa dolgu alt yüzdesini değiştirmek istersiniz. Bunun dışında kutunun dışında çalışır. IE9 +, Safari 9.0.1, Chrome 46 ve Firefox 41'de test edilmiştir.

EDIT (17 Mart 2016)

Bu yanıt gönderdiniz beri hem simüle etmek küçük bir CSS modülü yazdık background-size: coverve background-size: containüzerinde <video>: elemanları http://codepen.io/benface/pen/NNdBMj

Video için farklı hizalamaları destekler (benzer background-position). Ayrıca containuygulamanın mükemmel olmadığını unutmayın . Aksine background-size: contain, kabın genişliği ve yüksekliği daha büyükse videoyu gerçek boyutunun ötesine ölçeklendirmez, ancak bazı durumlarda yine de yararlı olabileceğini düşünüyorum. Ayrıca özel bir karışım elde etmek için birlikte kullanabileceğiniz özel fill-widthve fill-heightsınıflar ekledim ve ... denemek ve geliştirmek için çekinmeyin!containcontaincover

object-fit: cover Bu IE, Safari çoklu doldurma ile en iyi cevaptır.

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

Bu desteklemektedir img, videove pictureelemanları.

CSS ve küçük j'ler videoyu arka planı kapatabilir ve yatay olarak ortalayabilir.

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: (bunu pencere yeniden boyutlandırma ile bağlayın ve ayrı olarak arayın)

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

Uzun yorum bölümümüzün hemen ardından, aradığınız şey bu, jQuery tabanlı:

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

Yukarıdaki kod, bir div içinde bunu yaparken tarayıcı genişliğini ve yüksekliğini kullanıyorsa, bunu böyle bir şeye değiştirmeniz gerekir:

Div için:

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

Ayrıca bunun sadece Google Chrome olduğunu test ettiğimi belirtmeliyim ... işte bir jsfiddle: http://jsfiddle.net/ADCKk/

En iyi yanıt, videonuzun genişliğinden daha az tarayıcı genişliğinde olduğunuzda videoyu küçültmez. Bu CSS'yi kullanmayı deneyin (#bgvid videonuzun kimliği olacak şekilde):

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

Ben bu sorunu da var, çünkü bu sorunu vardı ama diğer çözümler benim durumum için işe yaramadı ...

düzgün background-size:cover;bir elemanlar arka plan-görüntü özelliği yerine bir öğe üzerinde css özelliği simüle düşünüyorum , böylece görüntü boyutu oranı geçerli windows en boy oranına karşılaştırmak gerekir, böylece hangi boyutta olursa olsun (ve görüntü durumunda daha geniş) pencere öğesi pencereyi dolduruyor (ve ayrıca merkezleme, gerçi bu bir gereklilik olup olmadığını bilmiyorum) ....

bir görüntü kullanarak, sadece basitlik uğruna, bir video öğesinin de iyi çalışacağından eminim.

önce öğelerin en boy oranını (yüklendikten sonra) alın, ardından pencere yeniden boyutlandırma işleyicisini takın, ilk boyutlandırma için bir kez tetikleyin:

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

ardından yeniden boyutlandırma işleyicinizde, öncelikle pencerenin geçerli en boy oranını görüntünün orijinal en boy oranıyla karşılaştırarak genişliği veya dolgu yüksekliğini doldurup doldurmayacağınızı belirlemelisiniz.

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

}

Bu yaklaşım sadece css ve html kullanır. Aslında videonun altında bir div'ı kolayca istifleyebilirsiniz. Kapak, ancak yeniden boyutlandırırken ortalanmamış.

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

@ErkekTerimleri

Bu soru 6 gün içinde biten Hidden Hobbes tarafından gönderilen +100 itibar değerinde bir açık ödül var. Yalnızca esnek bir CSS çözümü elde etmek için görünüm penceresi birimlerinin yaratıcı kullanımı.

Sadece CSS çözümü için bu soruya bir ödül açtınız, bu yüzden bunu deneyeceğim. Bunun gibi bir soruna çözümüm, videonun yüksekliğine ve genişliğine karar vermek için sabit bir oran kullanmaktır. Genellikle Bootstrap kullanıyorum, ama olmadan çalışması için gerekli CSS'yi oradan çıkardım. Bu, daha önce diğer şeylerin yanı sıra gömülü bir videoyu doğru oranla ortaladığım bir koddur. İşe yarayacak <video>ve <img>unsurlar da olmalı Burada en önemli olanı, ama diğer ikisini de verdim çünkü zaten onları döşedim. İyi şanslar! :)

jsfiddle tam ekran örneği

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

Yorumunu cevaplamak için weotch o Timothy Ryan Carpenter 'ın cevabı dikkate almaz coverler ortalama arka plan', bu hızlı CSS düzeltme sunuyoruz:

CSS:

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

Bu iki satırı eklemek herhangi bir öğeyi ortalar. Daha da iyisi, HTML5 videoyu işleyebilen tüm tarayıcılar da CSS3 dönüşümlerini destekler, bu yüzden her zaman çalışır.

Komple CSS buna benzer.

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

Timothy'nin cevabı üzerine doğrudan yorum yapardım, ama bunu yapacak kadar saygınlığım yok.

Çocuklar Kısa bir çözüm daha iyi ve benim için mükemmel çalışır. Video için kullandım. Ve css'deki kapak seçeneğini mükemmel bir şekilde taklit eder.

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

Eğer if'i çevirirseniz, içerisini alırsınız.

Ve işte css. (Merkez konumlandırma istemiyorsanız kullanmanıza gerek yoktur, üst div öğesi " position: relative " olmalıdır)

CSS

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

Bunu çözdüm ve paylaşmak istedim. Bu Bootstrap 4 ile çalışır. İle çalışır imgama ben test etmedi video. İşte HAML ve 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>

Eski soru, ancak herkesin bunu görmesi durumunda, bence en iyi cevap videoyu animasyonlu bir GIF'e dönüştürmektir. Bu size çok daha fazla kontrol sağlar ve sadece bir görüntü gibi davranabilirsiniz. Ayrıca, videoları otomatik oynatamadığınız için mobil cihazlarda çalışmasının tek yolu budur. Sorunun bir <img>etikette yapmasını istediğini biliyorum , ancak a <div>ve yapmanın dezavantajını gerçekten görmüyorumbackground-size: cover