图像/视频以纵向宽高比覆盖整个屏幕

Question

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

现在的样子：

这就是我想要的样子：

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