CSS を使用して HTML 要素で「background-size: cover」機能を実現するにはどうすればよいですか?

Background-Size を実現する方法: CSS で HTML 要素の機能をカバーする

HTML 要素のbackground-size:cover の機能をシミュレートするビデオや画像などの作業は難しい場合があります。ただし、CSS プロパティを組み合わせて使用​​すると、スクリプトを作成せずに、目的の動作を模倣するソリューションを作成することができます。

CSS ソリューション

背景を達成するための鍵-size:cover は、ビデオ要素の高さ、幅、最小サイズを適切に設定します。ビデオのアスペクト比 (例: 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>

このアプローチは、エッジケースなしで完全に機能し、ビデオ要素のbackground-size:coverをシミュレートするための信頼できるソリューションを提供します。使用されている CSS3 プロパティは古いブラウザーと互換性がない可能性があるため、完全なブラウザー間の互換性を確保するにはスクリプトベースのソリューションが必要になる可能性があることに注意してください。

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