CSS を使用して `` および `` 要素で `background-size: cover` 効果を実現するにはどうすればよいですか?

CSS アプローチ

CSS のみを使用すると、スクリプトに依存せずにビデオの完璧なカバー シミュレーションを作成できます。秘訣は、親要素のアスペクト比に対するビデオの幅と高さを正確に計算することにあります。たとえば、ビデオのアスペクト比が 16:9 の場合:

<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

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

互換性に関する考慮事項

このソリューションは CSS3 準拠のブラウザーでは問題なく機能しますが、古いブラウザーでは、これを実現するにはスクリプトベースのアプローチが必要になる場合があります。望ましい結果が得られます。

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