图像/视频以纵向纵横比覆盖整个屏幕答案

【问题标题】：Image/video cover entire screen in portrait aspect ratio图像/视频以纵向纵横比覆盖整个屏幕
【发布时间】：2016-07-31 22:48:28
【问题描述】：

我在我的网站上制作了一个覆盖整个屏幕的视频标题。当宽高比发生变化（例如纵向）时，视频或图像（对于不支持背景视频的设备）不会填满整个屏幕。

这就是现在的样子：

这就是我想要的样子：

【问题讨论】：

分享你的源代码，否则没人能帮助你，我们不是巫师:)

标签： javascript jquery html css

【解决方案1】：

<div id="stosto" class="header-video" style="overflow:hidden;">
    <img src="/templates/passage/vidhead/img/elodyposter.jpg"
         class="header-video__media"         
         data-teaser="/templates/passage/vidhead/video/headerv"
         data-video-width="1172"
         data-video-height="552">
  </div>


<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="/templates/passage/vidhead/js/modernizr.js"></script>
<script src="/templates/passage/vidhead/js/script.js?v1.1"></script>
<script>
  $(document).ready(function() {
    $('.header-video').each(function(i, elem) {
        headerVideo = new HeaderVideo({
          element: elem,
          media: '.header-video__media',
          playTrigger: '.header-video__play-trigger',
          closeTrigger: '.header-video__close-trigger'
        });
    });
  });
</script>
</div>

【讨论】：