背景サイズをシミュレート:カバーオンまたは質問する

Question

これは私がしばらく頭を悩ませていた問題でしたが、スクリプトを一切使用せず、5 行の CSS (セレクタと括弧を数えると 9 行) でビデオの完璧なカバーシミュレーションを実現できる優れたソリューションを見つけました。CSS3互換性を除けば、完全に動作しないエッジケースは0件です。。

例を見ることができますここ(アーカイブ)

問題はティモシーの解決策問題は、スケーリングを正しく処理しないことです。周囲の要素がビデオファイルよりも小さい場合、縮小されません。ビデオタグに 16 x 9 ピクセルなどの小さな初期サイズを指定しても、auto最終的にはネイティブファイルサイズの最小値に強制されます。このページで現在最も投票数が多いソリューションでは、ビデオファイルを縮小して大幅なズーム効果を得ることは不可能でした。

ただし、ビデオのアスペクト比が 16:9 などわかっている場合は、次の操作を実行できます。

.parent-element-to-video {
    overflow: hidden;
}
video {
    height: 100%;
    width: 177.77777778vh; /* 100 * 16 / 9 */
    min-width: 100%;
    min-height: 56.25vw; /* 100 * 9 / 16 */
}

ビデオの親要素がページ全体をカバーするように設定されている場合 ( などposition: fixed; width: 100%; height: 100vh;)、ビデオも同様にページ全体をカバーするようになります。

ビデオも中央に配置したい場合は、確実な中央配置方法を使用できます。

/* merge with above css */
.parent-element-to-video {
    position: relative; /* or absolute or fixed */
}
video {
    position: absolute;
    left: 50%; /* % of surrounding element */
    top: 50%;
    transform: translate(-50%, -50%); /* % of current element */
}

もちろん、、、vwはvhCSS3transformなので、かなり古いブラウザとの互換性スクリプトを使用する必要があります。

Answer 1