CSS のみを使用してビデオおよび画像要素の「background-size: cover」の動作を実現するにはどうすればよいですか?

ビデオ要素と画像要素での「background-size: cover」動作の実現

「background-size」の機能をシミュレートしようとするとき

以前のソリューションの問題点

Timothy のソリューションは、一部のシナリオでは効果的ですが、失敗します。スケーリングを正しく処理するため、ビデオの親要素がビデオ ファイルより小さい場合、不要なズーム効果が発生します。

改善された解決策

ビデオのアスペクト比がわかっている場合、16:9 など、この CSS コードは目的の効果を実現します。

<code class="css">.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 */
}</code>

このコードは、高さをコンテナの 100% に設定し、幅をアスペクト比に基づいて計算された値に設定します。最小の幅と高さにより、コンテナがビデオ ファイルよりも小さい場合に縮小が行われます。

ビデオの中央揃え

中央揃えには、次の CSS を使用します。

<code class="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 */
}</code>

これにより、ビデオが絶対的に配置され、translate を使用して親要素内で中央に配置されます。

互換性に関する考慮事項

VW、VH、および変換は CSS3 の機能です。古いブラウザとの互換性を確保するには、JavaScript を使用する必要がある場合があります。

以上がCSS のみを使用してビデオおよび画像要素の「background-size: cover」の動作を実現するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。