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

以前、「ボックスの高さをブラウザの高さに合わせるテク3つ！」というのを書きました。

本当は今回の記事の内容まで一気に行きたかったのですが、長くなるので分けることにしました。
ですので今回は、続編でブラウザの高さに合わせたボックス内で、画像や動画を全画面にフィットさせる方法をやっていきたいと思います。

これができれば、最近良く見るブラウザ全体にフィットした背景動画のサイトも作れます。

Contents

CSSのバックグラウンドで実装
jQueryで実装
まとめ

CSSのバックグラウンドで実装

これが一番簡単な方法です。「background-size」プロパティで設定します。

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

たった2行ですので簡単ですね。ブラウザの幅や高さを色々変えても常に背景画像が見切れることなくフィットします。

しかし、動画はそもそも「background」プロパティで設定できません。画像も背景画像ではなく「img」タグで配置したい場合もあると思います。

そこで、jQueryで「background-size: cover;」と同じように画像や動画をフィットさせていきたいと思います。

jQueryで実装

まずはサンプルから見てみましょう。

CSSの「background-size: cover;」と表示のされ方は変わらないですが、画像は「img」タグで配置しています。

HTML

<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」クラスをつけました。こちらにjQueryで画面にフィットさせる処理をします。

CSS

.fitImg{
    position: absolute;
}

画像の拡大や位置の指定はjQueryで設定しますので、画像のCSSはこの1行のみです。

jQuery

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

1,2行目　「ボックスの高さをブラウザの高さに合わせるテク3つ！」でやったとおり、高さをブラウザの高さに合わせています。

15行目　今回は「setBgImg」という関数を作りました。

簡単に説明すると画像や動画に「setBgImg」を使うだけです。
「setBgImg(object)」の「object」に画像や動画を入れます。

5,12行目　ロードが完了したタイミングと、ブラウザがリサイズされたタイミングで「setBgImg($('.fitImg'));」として関数を実行します。

関数をざっくり説明すると、28行目の「fixScale」に幅と高さの拡大率の大きい方を入れます。これで画像の拡大が必ずブラウザのサイズより大きくなり、見切れることがなくなります。

これだけだと拡大はできますが、位置がセンターになりません。
なので、35行目,36行目でブラウザからはみ出した画像や動画の数値の半分を計算して、その分移動させてセンターに配置しています。

タイトルに「動画」もうたっておりますので、動画バージョンのサンプルもご確認ください。
「img」の部分を「video」タグに変更しただけです。

動画は下記からダウンロードしました。