Pure CSS を使用して <video> と <img> に対して一貫した「背景サイズ: カバー」効果を実現するにはどうすればよいですか?-CSSチュートリアル-php.cn

Pure CSS を使用して

Susan Sarandon

リリース： 2024-10-30 16:02:03

オリジナル

719 人が閲覧しました

How to Achieve a Consistent と Pure CSS を使用して <video> と <img> に対して一貫した「背景サイズ: カバー」効果を実現するにはどうすればよいですか? を純粋な CSS で使用しますか? " /> とを純粋な CSS で? " />

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

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

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

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

例:

<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 を使用して

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

Pure CSS を使用して