on:2017年5月31日sponsorsHTML内にインラインで配置した動画や画像を、背景画像のようにブラウザいっぱいに表示するCSSのテクニックを紹介します。レスポンシブに完全対応、スマホでもデスクトップのあらゆるサイズのスクリーンでも最適なサイズで表示されます。※キャプチャ画像は静止画ですが、実際は動画です。実際の動作は、デモページでご覧ください。#80横長のスクリーンでも、動画は最適なサイズで表示されます。上と比較して、岸の両横が見えていることに注目です。横を小さくしてもちょうどよくクロップして表示されますが、スマホサイズの小さいスクリーンでは高さを半分にして、全体を表示するように設定されています。スマホサイズで表示object-fitの実装方法HTMLHTMLはシンプルで、video要素を使って動画を配置します。cover;」を指定し、スマホで半分の高さにするには親コンテナで指定します。0;}object-fitのサポートブラウザobject-fitのサポートブラウザは、下記の通りです。Edgeを除く、すべてのブラウザにサポートされています。object-fitのサポートブラウザ※Edgeでは近いうちにサポートされるようです。とお嘆きの人には、下記のスクリプトが便利です。fitieはIEでもobject-fitが利用できるようにするもので、画像や動画、その他の埋め込み可能なメディア形式をサポートしています。-GitHub使い方は簡単で、外部ファイルとして記述するだけです。src="fitie.js"></script></head>CSSは他のブラウザと同じ記述で、OKです。