图片/视频覆盖了纵向宽高比的整个屏幕

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>