Pure CSS を使用して と に対して一貫した「背景サイズ: カバー」効果を実現するにはどうすればよいですか?

と を純粋な CSS で使用しますか? " /> と を純粋な CSS で? " />

<video> および <img>

のような要素に対して一貫した「background-size: cover」効果を実現します。 video>

エッジケースを使用しない CSS ソリューション:

スクリプトに依存する代わりに、エッジ ケースは次の手順を使用して実装できます:

親要素をオーバーフロー: 非表示に設定します。
1. ビデオまたは画像要素を高さ: 100% に設定します。
2. アスペクト比に基づいて幅を計算します (例: 16:9 ビデオの場合は 100 * 16 / 9)。
3. 親よりも小さいサイズに変更されないように、min-width: 100% を設定します。
4. 高さが比例して縮小されるように最小高さを設定します。

例:

<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>

中央に配置されたビデオ:

ビデオを中央に配置するには、次の CSS を使用します:

以上がPure CSS を使用して