background-size: cover; の挙動を自前で実装する

Youtube動画を埋め込む場合や、canvas要素を使う場合など、
background-size プロパティを使うことは出来ないけれど background-size: cover; 的な挙動をさせたいときはしばしばあるかと思います。

そんなときに使える計算式をスニペットとして残しておこうと思います。

sample.html

<div class="wrapper">
  <video class="video"> <!-- 表示要素の例として、videoタグを利用します。 -->
</div>

backgroundCover.js

// $('.wrapper') は表示要素を囲う箱を表します。
var wrapper_width = $('.wrapper').width();
var wrapper_height = $('.wrapper').height();

// content_width, content_heightは、表示する要素のオリジナルの幅と高さを表します。
var content_width = 1280;
var content_height = 720;

// target_width, target_heightは実際に表示されるときの幅と高さが代入されます。
var target_width;
var target_height;

// target_offset_topとtarget_offset_leftは表示される要素をセンタリングさせるためのオフセット値が代入されます。
var target_offset_top;
var target_offset_left;

if(wrapper_height / wrapper_width > content_height / content_width){
    // 囲う箱のほうが、表示する要素よりも縦長だった場合
    target_height = wrapper_height;
    target_width = wrapper_height * (content_width / content_height);
    target_offset_top = 0;
    target_offset_left = (wrapper_width - target_width) / 2;
}
else{
    // 表示する要素のほうが、囲う箱よりも縦長だった場合
    target_width = wrapper_width;
    target_height = wrapper_width * (content_height / content_width);
    target_offset_top = (wrapper_height - target_height) / 2;
    target_offset_left = 0;
}

$('.video').attr({
    width: target_width,
    height: target_height
}).css({
    transform: `translate(${target_offset_left}px, ${target_offset_top}px)`
});