[CSS] object-fitの使い方: レスポンシブ対応、動画や画像をブラウザいっぱいに表示するCSSのテクニック

HTML内にインラインで配置した動画や画像を、背景画像のようにブラウザいっぱいに表示するCSSのテクニックを紹介します。

レスポンシブに完全対応、スマホでもデスクトップのあらゆるサイズのスクリーンでも最適なサイズで表示されます。

デモのキャプチャ

※キャプチャ画像は静止画ですが、実際は動画です。

object-fitを使って動画をブラウザいっぱいに表示

実際の動作は、デモページでご覧ください。

デモのキャプチャ

Daily Pen #80

横長のスクリーンでも、動画は最適なサイズで表示されます。
上と比較して、岸の両横が見えていることに注目です。

デモのキャプチャ

横長サイズで表示

横を小さくしてもちょうどよくクロップして表示されますが、スマホサイズの小さいスクリーンでは高さを半分にして、全体を表示するように設定されています。

デモのキャプチャ

スマホサイズで表示

object-fitの実装方法

HTML

HTMLはシンプルで、video要素を使って動画を配置します。

CSS

video要素に「object-fit: cover;」を指定し、スマホで半分の高さにするには親コンテナで指定します。

object-fitのサポートブラウザ

object-fitのサポートブラウザは、下記の通りです。
2017年5月現在、IE, Edgeを除く、すべてのブラウザにサポートされています。

サイトのキャプチャ

object-fitのサポートブラウザ

※Edgeでは近いうちにサポートされるようです。現在は、高い優先度で開発中とのこと(参考: developer.microsoft.com

object-fitをIEで使う

IEで利用できないのなら使えないじゃん! とお嘆きの人には、下記のスクリプトが便利です。

fitieはIEでもobject-fitが利用できるようにするもので、画像や動画、その他の埋め込み可能なメディア形式をサポートしています。

サイトのキャプチャ

fitie -GitHub

使い方は簡単で、外部ファイルとして記述するだけです。

CSSは他のブラウザと同じ記述で、OKです。

sponsors

top of page

©2024 coliss