имитировать размер фона: обложка на <video> или же <img>

Как я могу имитировать функциональностьbackground-size:cover на элемент HTML, как<video> или же<img>?

Мне бы хотелось, чтобы это работало как

background-size: cover;
background-position: center center;
 seron29 мая 2012 г., 13:30
Да, переполнение одинаково на противоположных сторонах. Мне известно о проблеме управления видео.
 Lennart Hase29 мая 2012 г., 13:26
Хорошо, чтобы упростить 100% ширину изображения / видео, и если оно переполнено? Если вы хотите этого, я могу посмотреть, смогу ли я это кодировать, но для видео вы должны иметь в виду, что вам понадобится специальный проигрыватель, потому что в большинстве браузеров элементы управления находятся в нижней части проигрывателя, и они будут отключены, если есть переполнение ...
 seron29 мая 2012 г., 13:59
Если окно будет выше изображения, я думаю, что оно оставит пустое место где-нибудь вдоль вертикальной оси. В этом случае изображение должно переполняться по бокам, а его высота должна быть такой же, как у окна. И обратное должно происходить, когда окно шире, чем изображение.
 Lennart Hase29 мая 2012 г., 13:03
ладно, я никогда не использовал background-size: cover; но я посмотрел на него онлайн, так что вы хотите получить полноэкранное изображение / видео, которое изменяется при изменении размера окна?
 seron29 мая 2012 г., 13:09
Да, но есть тонкости сcover. См. Размер фона 101 нассылк.

Ответы на вопрос(18)

работает сimg но я не проверял это сvideo. Вот это HAML и SCS

HAML
.container
  .detail-img.d-flex.align-items-center
    %img{src: 'http://placehold.it/1000x700'}
SCSS
.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>

object-fit: cover лучший ответ с этим IE, полифилл Safari.

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

Он поддерживаетimg, video а такжеpicture элементы.

JsFiddle

как и ширина 100%. Это не оптимально для<video>, и эти ответы слишком сложны. Вам не нужен jQuery или JavaScript для создания полноэкранного фонового видео.

Имейте в виду, что мой код не будет полностью покрывать фон видео, подобным обложке, но вместо этого он сделает видео настолько большим, насколько это необходимо для поддержания соотношения сторон, и при этом будет охватывать весь фон. Любое лишнее видео будет отбрасываться по краю страницы, причем стороны зависят от того, где вы привязали видео.

Ответ довольно прост

Просто используйте этот видеокод HTML5 или что-то в этом роде: (тестирование на полной странице)

html, body {
  width: 100%; 
  height:100%; 
  overflow:hidden;
}

#vid{
  position: absolute;
  top: 50%; 
  left: 50%;
  -webkit-transform: translateX(-50%) translateY(-50%);
  transform: translateX(-50%) translateY(-50%);
  min-width: 100%; 
  min-height: 100%; 
  width: auto; 
  height: auto;
  z-index: -1000; 
  overflow: hidden;
}
<video id="vid" video autobuffer autoplay>
  <source id="mp4" src="http://grochtdreis.de/fuer-jsfiddle/video/sintel_trailer-480.mp4" type="video/mp4">
</video>

Минимальная высота и минимальная ширина позволят видео поддерживать соотношение сторон видео, которое обычно является соотношением сторон любого обычного браузера при нормальном разрешении. Любое лишнее видео выходит за пределы страницы.

 Sjeiti14 дек. 2014 г., 10:38
При современных технологиях это должен быть принятый ответ: CSS-решение предпочтительнее Javascript. Даже при том, что это требует, чтобы вы правильно установили ваш parentNode. Для центрирования видео используйте это:position: absolute; left: 50%; top: 50%; transform: translateX(-50%) translateY(-50%);.
 Ryan Burney03 сент. 2013 г., 19:15
Это намного проще, чем другие ответы, и отлично работает для меня. Просто настройкаmin-width илиmin-height делает свое дело.
 weotch10 окт. 2013 г., 20:04
Это решение не центрирует видео, как обложка.
 carrabino28 окт. 2013 г., 03:26
просто комментарий, чтобы новички не вырывали свои волосы: #video_background {должно быть #videobackground {.
 Kevin Newman17 окт. 2014 г., 20:17
Это вовсе не уменьшает видео (я не пытался его масштабировать), что вызывает многочисленные проблемы, если окно браузера маленькое, а видео большое. Так что, в основном, он заботится только об отбрасывании части background-size: cover, а не о масштабировании.

что я вырвал на некоторое время, но я наткнулся на отличное решение, которое не использует сценарий и может обеспечить идеальное моделирование покрытия на видео с 5 строками CSS (9, если вы считаете селекторы и скобки). Это имеет 0 крайних случаев, в которых он не работает идеально, за исключением CSS3-совместимости.

Вы можете увидеть примерВо

Проблема с Решение Тимофея, это то, что он не обрабатывает масштабирование правильно. Если окружающий элемент меньше видеофайла, он не уменьшается. Даже если вы дадите видео тегу крошечный начальный размер, например, 16 на 9 пикселей,auto заканчивает тем, что принудительно устанавливает минимальный размер файла. Принимая во внимание текущее решение с наибольшим количеством голосов на этой странице, я не смог уменьшить масштаб видеофайла, что привело к резкому увеличению масштаба.

Если известно соотношение сторон вашего видео, например 16: 9, вы можете сделать следующее:

.parent-element-to-video {
    overflow: hidden;
}
video {
    height: 100%;
    width: 177.77777778vh; /* 100 * 16 / 9 */
    min-width: 100%;
    min-height: 56.25vw; /* 100 * 9 / 16 */
}

Если родительский элемент видео установлен на всю страницу (например,position: fixed; width: 100%; height: 100vh;), тогда видео тоже будет.

Если вы хотите, чтобы видео также центрировалось, вы можете использовать метод точного центрирования:

/* merge with above css */
.parent-element-to-video {
    position: relative; /* or absolute or fixed */
}
video {
    position: absolute;
    left: 50%; /* % of surrounding element */
    top: 50%;
    transform: translate(-50%, -50%); /* % of current element */
}

Конечно,vw, vh, а такжеtransform это CSS3, так что если вам нужно совместимость с более старыми браузерами, вам нужно будет использовать скрипт.

 mark.monteiro31 мар. 2016 г., 17:48
Это лучший ответ. Нет JavaScript, чистый CSS, масштабируется правильно и по центру.
 commonpike28 апр. 2016 г., 14:15
Не могли бы вы объяснить, почему это работает? Я не могу обернуть голову вокруг этого. чтоvh а такжеvw это как-то связано?
 M-Pixel27 июн. 2016 г., 18:31
@ insidesin: опубликовать скрипку?
 insidesin26 июн. 2016 г., 16:25
Кажется, по какой-то причине слева от экрана слева от экрана появляется полоска белого ...
 Josh Burson07 апр. 2016 г., 00:51
А, да, чувак. Это ответ на 2016 год. Игнорируйте все остальные.

Для некоторых браузеров вы можете использовать

object-fit: cover;

http: //caniuse.com/object-fi

 creimers02 дек. 2014 г., 15:11
Для тех браузеров, которые его не поддерживают (есть еще), есть полифилл: Github.com / anselmh / объект посадки
 Petr Brazdil05 нояб. 2015 г., 12:18
Спасибо, замечательный совет
 Mike Kormendy26 окт. 2014 г., 22:36
Это очень мощная декларация, которая, если браузеры ее примут, положит конец многим неприятностям с масштабированием на веб-сайтах.
 Peter_Fretter10 нояб. 2014 г., 09:05
Это именно то, что я искал!
 Jossef Harush11 нояб. 2016 г., 11:08
должен был также подать заявкуheight: 100%; width: 100%;. спасибо за этот современный ответ
Решение Вопроса

это 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>

 Jim Greenleaf04 окт. 2014 г., 03:47
Я нашел этот подход полезным и упаковал его как простой плагин jQuery для любого заинтересованного: Github.com / aMoniker / jquery.videocover
 Chaser32425 мая 2013 г., 18:39
Это лучшее решение, которое я нашел для этой проблемы. Благодарность
 Jan06 мар. 2013 г., 12:04
Почему это решение было отвергнуто? Судя по всему, это решает проблему.
 Alexandre DuBreuil09 мар. 2014 г., 12:38
Это прекрасно работает, если видео большое, а окно маленькое, но не будет работать для меня, если окно больше, чем видео, и видео нужно масштабировать. Я добавил минский трюк от @ Timothy-Ryan-Carpenter ответь здесь) к тегу видео как:video { min-width: 100%; min-height: 100%; } и это работает как шарм.
 Barlas Apaydin02 июл. 2014 г., 13:57
Большое спасибо за прекрасный ответ, приятель! ура

но они включают в себя JavaScript или они не центрируют видео по горизонтали и вертикали.

Вы можете использовать это полное решение CSS для создания видео, имитирующего свойство background-size: cover:

  video {
    position: fixed;           // Make it full screen (fixed)
    right: 0;
    bottom: 0;
    z-index: -1;               // Put on background

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

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

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

    background: url(bkg.jpg) no-repeat;      // Background placeholder, not always needed
    background-size: cover;
  }
 matt05 нояб. 2014 г., 23:06
Это не сработало для меня. Видео не увеличилось до полноэкранного. Могу ли я увидеть ваш HTML для этого примера? Это просто видео тег в теле?
 Assaf Katz09 сент. 2015 г., 14:20
отлично работает для меня. я просто изменил положение: зафиксировано в абсолютном
 rafaelbiten15 мая 2015 г., 16:54
Действительно хорошее решение. Сначала это не сработало для меня, но, возможно, это было что-то, я пропустил причину, когда я скопировал и вставил ваш CSS, это сработало! Благодарность ;

отцентрированным.

CSS:

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

JS: (связать это с изменением размера окна и вызвать один раз отдельно)

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

Даниэль де Вит ответ и комментарии, я искал немного больше. Спасибо ему за решение.

Решением является использованиеobject-fit: cover; у которого есть отличныйподдержк (все за пределами IE и Edge, но в настоящее время он находится в Рассмотрение). Если вы хотите поддерживать IE и Edge, вы можете использовать полифилл как Объект-Fit-образы или Объект посадки.

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

и с родителем:

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>

 Routhinator30 нояб. 2016 г., 18:47
Лучший современный ответ.

я думаю, это то, что вы ищете, на основе jQuery:

HTML:

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

JS:

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

CSS:

body{
    overflow: hidden;
}

Приведенный выше код использует ширину и высоту браузера, если вы делаете это внутри div, вам придется изменить его на что-то вроде этого:

Для Div:

HTML:

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

JS:

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

CSS:

div{
   overflow: hidden;
}

Я также должен заявить, что я только что проверил это Google Chrome ... вот jsfiddle:http: //jsfiddle.net/ADCKk

 Lennart Hase29 мая 2012 г., 16:01
Я обновил его, но у меня все еще есть небольшая проблема: если вы значительно уменьшите ширину, он внезапно подпрыгнет ... Jsfiddle.net / ADCKk / 1
 seron29 мая 2012 г., 15:36
Кажется, jsfiddle ничего не делает, когда я изменяю размер фрейма Result или размер браузера. Я пробовал это в Chrome.
 Lennart Hase29 мая 2012 г., 16:37
ладно, извините, но я ничего не понимаю, я пробовал так много вещей, что, я думаю, я запутался, я не уверен, если это возможно ... Сценарий выше работает только когда вы обновляете страницу, чтобы сделать ее работать, когда вы изменяете размер окна, вам нужно использовать событие window.resize в js, но я не могу заставить его работать, может быть, вы можете использовать эту информацию :) удачи в любом случае

ниже видео. Это прикрытие, но не по центру при изменении размера.

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

если ширина браузера меньше ширины вашего видео. Попробуйте использовать этот CSS (с идентификатором вашего видео #bgvid):

#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%);
}
 aleclarson16 мая 2017 г., 20:49
Почему негатиz-index необходимо
 Ramzi Dreessen17 мая 2017 г., 21:08
Это не так - просто полезно при проектировании с несколькими слоистыми элементами. Я удалил это.

у меня есть лучшее решение, оно короткое и прекрасно работает для меня. Я использовал это для видео. И его отлично эмулирует вариант обложки в CS

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

Если вы перевернете if, иначе вы получите содержание.

А вот и CSS. (Вам не нужно использовать его, если вы не хотите позиционировать по центру, родительский div должен быть "position: относительная ")

CSS

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

но в случае, если кто-нибудь увидит это, лучший ответ на мой взгляд - конвертировать видео в анимированный GIF. Это дает вам гораздо больше контроля, и вы можете просто обращаться с ним как с изображением. Это также единственный способ работать на мобильном устройстве, поскольку вы не можете автоматически воспроизводить видео. Я знаю, что вопрос просит сделать это в<img> тег, но я не вижу обратной стороны использования<div> и делаюbackground-size: cover

 Henning Fischer21 дек. 2018 г., 15:42
Это хорошая идея, и в некоторых случаях стоит попробовать. Единственным недостатком является то, что * .gif (в моем случае) больше по размеру файла. Я конвертировал 2,5 МБ * .mpeg в 16 МБ * .gif.
 D-Marc27 дек. 2018 г., 20:28
Я согласен, и часто.gif намного больше по размеру, но при этом более размытый. Мое мнение изменилось с тех пор, как я написал этот ответ. Жаль, что вы не можете объединить лучшее из обоих.
 Henning Fischer28 дек. 2018 г., 13:11
Я получил (укороченный) * .gif для мобильного телефона и * .mp4 для настольного компьютера.

потому что у меня была эта проблема, но другие решения не помогли в моей ситуации ...

я думаю, чтобы правильно моделироватьbackground-size:cover;войство @ css для элемента вместо свойства background-image elements, вы должны сравнить соотношение сторон изображения с текущим соотношением сторон окна, поэтому независимо от того, какой размер (а также в случае, если изображение выше, чем шире), window - элемент, заполняющий окно (и также центрирующий его, хотя я не знаю, было ли это требованием) ....

Использование изображения, просто ради простоты, я уверен, что элемент видео тоже будет работать нормально.

first получить соотношение сторон элементов (после загрузки), затем присоединить обработчик изменения размера окна, вызвать его один раз для первоначального определения размера:

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

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

Затем в обработчике изменения размера вы должны сначала определить, следует ли заполнять ширину или высоту заливки, сравнивая текущее соотношение сторон окна с исходным соотношением сторон изображения.

function resizeBackground( evt ) {

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

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

}

@ Скрытый Гоббс

Этот вопрос имеет открытую награду +100 репутации от Скрытого Гоббса, заканчивающуюся через 6 дней. Изобретательное использование единиц просмотра для получения гибкого решения только для CSS.

Вы открыли награду за этот вопрос только для решения CSS, поэтому я попробую. Мое решение такой проблемы - использовать фиксированное соотношение для определения высоты и ширины видео. Я обычно использую Bootstrap, но я извлек из него необходимый CSS, чтобы он работал без него. Это код, который я использовал ранее, для центрирования вставленного видео с правильным соотношением. Это должно работать для<video> а также<img> elements тоже Это самый важный, который уместен здесь, но я дал вам и два других, так как они уже были у меня в руках. Удачи! :)

jsfiddle полноэкранный пример

.embeddedContent.centeredContent {
    margin: 0px auto;
}
.embeddedContent.rightAlignedContent {
    margin: auto 0px auto auto;
}
.embeddedContent > .embeddedInnerWrapper {
    position:relative;
    display: block;
    padding: 0;
    padding-top: 42.8571%; /* 21:9 ratio */
}
.embeddedContent > .embeddedInnerWrapper > iframe {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    height: 100%;
    width: 100%;
    border: 0;
}
.embeddedContent {
    max-width: 300px;
}
.box1text {
    background-color: red;
}
/* snippet from Bootstrap */
.container {
    margin-right: auto;
    margin-left: auto;
}
.col-md-12 {
    width: 100%;
}
<div class="container">
    <div class="row">
        <div class="col-md-12">
            Testing ratio AND left/right/center align:<br />
            <div class="box1text">
                <div class="embeddedContent centeredContent">
                    <div class="embeddedInnerWrapper">
                        <iframe allowfullscreen="true" allowscriptaccess="always" frameborder="0" height="349" scrolling="no" src="//www.youtube.com/embed/u6XAPnuFjJc?wmode=transparent&amp;jqoemcache=eE9xf" width="425"></iframe>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<div class="container">
    <div class="row">
        <div class="col-md-12">
            Testing ratio AND left/right/center align:<br />
            <div class="box1text">
                <div class="embeddedContent rightAlignedContent">
                    <div class="embeddedInnerWrapper">
                        <iframe allowfullscreen="true" allowscriptaccess="always" frameborder="0" height="349" scrolling="no" src=",//www.youtube.com/embed/u6XAPnuFjJc?wmode=transparent&amp;jqoemcache=eE9xf" width="425"></iframe>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<div class="container">
    <div class="row">
        <div class="col-md-12">
            Testing ratio AND left/right/center align:<br />
            <div class="box1text">
                <div class="embeddedContent">
                    <div class="embeddedInnerWrapper">
                        <iframe allowfullscreen="true" allowscriptaccess="always" frameborder="0" height="349" scrolling="no" src="//www.youtube.com/embed/u6XAPnuFjJc?wmode=transparent&amp;jqoemcache=eE9xf" width="425"></iframe>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

 turbopipp11 нояб. 2015 г., 12:17
Ага, ну, на самом деле это не было проблемой, и очень мило с вашей стороны отдать должное уже существующим ответам. Думаю, мне стоит почитать о системе вознаграждений. :) Благодарност
 Hidden Hobbes11 нояб. 2015 г., 11:10
Спасибо за ответ @turbopipp, хотя, боюсь, ты неправильно понял причину моей награды. Я поднял его, чтобы я мог присудить его существующему ответу, он просто не позволит мне сделать это, пока щедрость не будет активной в течение 24 часов. Тем не менее, +1 для ваших усилий полезен трюк с заполнением в процентах, чтобы гарантировать, что элемент сохраняет правильное соотношение сторон.

Weotch что Тимоти Райан Карпентертвет @ не учитываетcoverентрирование фона @, я предлагаю это быстрое исправление CSS:

CSS:

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

Добавление этих двух строк будет центрировать любой элемент. Более того, все браузеры, которые могут обрабатывать видео HTML5, также поддерживают преобразования CSS3, поэтому это всегда будет работать.

Полный CSS выглядит следующим образом.

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

Я бы прямо прокомментировал ответ Тимоти, но у меня недостаточно репутации, чтобы это сделать.

Решение M-Pixel великолепен тем, что решает проблему масштабирования Ответ Тимофея (видео будет увеличиваться, но не уменьшаться, поэтому, если ваше видео действительно большое, есть хорошие шансы, что вы увидите только небольшой увеличенный фрагмент). Однако это решение основано на ложных предположениях, связанных с размером контейнера видео, а именно то, что оно обязательно составляет 100% ширины и высоты области просмотра. Я обнаружил несколько случаев, когда у меня это не получалось, поэтому я решил заняться этой проблемой сам, и думаю, что придумал последнее решение.

HTML

<div class="parent-container">
    <div class="video-container">
        <video width="1920" height="1080" preload="auto" autoplay loop>
            <source src="video.mp4" type="video/mp4">
        </video>
    </div>
</div>

CSS

.parent-container {
  /* any width or height */
  position: relative;
  overflow: hidden;
}
.video-container {
  width: 100%;
  min-height: 100%;
  position: absolute;
  left: 0px;
  /* center vertically */
  top: 50%;
  -moz-transform: translate(0%, -50%);
  -ms-transform: translate(0%, -50%);
  -webkit-transform: translate(0%, -50%);
  transform: translate(0%, -50%);
}
.video-container::before {
  content: "";
  display: block;
  height: 0px;
  padding-bottom: 56.25%; /* 100% * 9 / 16 */
}
.video-container video {
  width: auto;
  height: 100%;
  position: absolute;
  top: 0px;
  /* center horizontally */
  left: 50%;
  -moz-transform: translate(-50%, 0%);
  -ms-transform: translate(-50%, 0%);
  -webkit-transform: translate(-50%, 0%);
  transform: translate(-50%, 0%);
}

Это также зависит от соотношения видео, поэтому если ваше видео имеет отношение, отличное от 16/9, вам нужно изменить нижний процент заполнения. Помимо этого, он работает из коробки. Протестировано в IE9 +, Safari 9.0.1, Chrome 46 и Firefox 41.

EDIT (17 марта 2016 г.)

Так как я опубликовал этот ответ, я написал небольшой модуль CSS для имитации обоихbackground-size: cover а такжеbackground-size: contain на<video> элементы:http: //codepen.io/benface/pen/NNdBM

Он поддерживает различные выравнивания для видео (аналогичноbackground-position). Также обратите внимание, чтоcontain реализация не идеальна. В отличие отbackground-size: contain, если ширина и высота контейнера больше, видео не будет масштабироваться до фактического размера, но я думаю, что в некоторых случаях оно все еще может быть полезным. Я также добавил специальныйfill-width а такжеfill-height классы, которые вы можете использовать вместе сcontain чтобы получить специальное сочетаниеcontain а такжеcover ... попробуйте, и не стесняйтесь улучшать это!

 benface18 мая 2016 г., 17:52
@ jetlej Это здесь. Какой браузер вы тестируете? Вы смотрели на мой ко
 MrThunder11 авг. 2016 г., 16:58
Это хорошо для меня, как запасной вариант для Edge. Приветствия
 Eric15 февр. 2018 г., 11:03
Спасибо за это, отлично работает!
 MrThunder11 авг. 2016 г., 22:08
@ benoitr007 Я использовалobject-fit: cover для FF и Chrome и ваше решение с Modernizr для IE
 jetlej16 мая 2016 г., 20:30
Это не масштабирует видео выше нормального разрешения, чтобы оно соответствовало 100% ширине / высоте, несмотря ни на что. Таким образом, он не копирует функциональность «обложки».

Ваш ответ на вопрос