[CSS] object-fitの使い方: レスポンシブ対応、動画や画像をブラウザいっぱいに表示するCSSのテクニック
Post on:2017年5月31日
sponsors
HTML内にインラインで配置した動画や画像を、背景画像のようにブラウザいっぱいに表示するCSSのテクニックを紹介します。
レスポンシブに完全対応、スマホでもデスクトップのあらゆるサイズのスクリーンでも最適なサイズで表示されます。
※キャプチャ画像は静止画ですが、実際は動画です。
object-fitを使って動画をブラウザいっぱいに表示
実際の動作は、デモページでご覧ください。
横長のスクリーンでも、動画は最適なサイズで表示されます。
上と比較して、岸の両横が見えていることに注目です。
横長サイズで表示
横を小さくしてもちょうどよくクロップして表示されますが、スマホサイズの小さいスクリーンでは高さを半分にして、全体を表示するように設定されています。
スマホサイズで表示
object-fitの実装方法
HTML
HTMLはシンプルで、video要素を使って動画を配置します。
|
1 2 3 4 5 6 7 |
<section class="video-container"> <video src="video.mp4" autoplay loop playsinline></video> <div class="callout"> <h1>見出し</h1> <div>コンテンツ</div> </div> </section> |
CSS
video要素に「object-fit: cover;」を指定し、スマホで半分の高さにするには親コンテナで指定します。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
.video-container { height: 50vh; position: relative; overflow: hidden; } @media (min-width: 600px) { .video-container { height: 100vh; } } video { -o-object-fit: cover; object-fit: cover; position: absolute; height: 100%; width: 100%; top: 0; left: 0; } |
object-fitのサポートブラウザ
object-fitのサポートブラウザは、下記の通りです。
2017年5月現在、IE, Edgeを除く、すべてのブラウザにサポートされています。
※Edgeでは近いうちにサポートされるようです。現在は、高い優先度で開発中とのこと（参考: developer.microsoft.com）
object-fitをIEで使う
IEで利用できないのなら使えないじゃん！ とお嘆きの人には、下記のスクリプトが便利です。
fitieはIEでもobject-fitが利用できるようにするもので、画像や動画、その他の埋め込み可能なメディア形式をサポートしています。
使い方は簡単で、外部ファイルとして記述するだけです。
|
1 2 3 4 |
<head> ... <script src="fitie.js"></script> </head> |
CSSは他のブラウザと同じ記述で、OKです。
|
1 2 3 |
img.cover, video.cover { object-fit: cover; } |
sponsors
