画像や動画を全画面にフィットさせて中央に表示する

background: url(../images/mainvisual.jpg) no-repeat center;
background-size: cover;

<div class="box">
    <img class="fitImg" src="images/mainvisual.jpg" alt="">
    <div class="box__centered">
        <div class="box__contents">
            <h2 class="box__title">WEBDESIGNDAY</h2>
            <P class="box__text">
            MORE GOOD DESIGN<br>
            MORE INSPIRATION<br>
            MORE AND MORE                   
            </P>
        </div><!--box__contents-->
    </div><!--box__centered-->                     
</div><!--box-->

.fitImg{
    position: absolute;
}

var winH = $(window).height();
$('.box').outerHeight(winH);
 
$(window).on('load',function(){
    setBgImg($('.fitImg'));
});
 
$(window).on('resize',function(){
    winH = $(window).height();
    $('.box').outerHeight(winH);
    setBgImg($('.fitImg'));
});
 
function setBgImg(object){
    //画像サイズ取得
    var imgW = object.width();
    var imgH = object.height();
 
    //ウィンドウサイズ取得
    var winW = $(window).width();
    var winH = $(window).height();  
 
    //幅・高さの拡大率取得
    var scaleW = winW / imgW;
    var scaleH = winH / imgH;
 
    //幅・高さの拡大率の大きいものを取得
    var fixScale = Math.max(scaleW, scaleH);
 
    //画像の幅高さを設定
    var setW = imgW * fixScale;
    var setH = imgH * fixScale;
 
    //画像の位置を設定
    var moveX = Math.floor((winW - setW) / 2);
    var moveY = Math.floor((winH - setH) / 2);
 
    //設定した数値でスタイルを適用
    object.css({
        'width': setW,
        'height': setH,
        'left' : moveX,
        'top' : moveY
    });     
}