ビデオや画像などの HTML 要素の「background-size: cover」をシミュレートするにはどうすればよいですか?

HTML 要素で Background-Size: Cover をシミュレートできますか?

Background-size: cover は、画像をスケーリングするために不可欠な CSS プロパティです。アスペクト比を維持しながらコンテナ要素内に収まります。ただし、この機能は、video タグや img タグなどの HTML 要素ではネイティブにサポートされていません。

背景サイズの達成: CSS でカバー

幸いなことに、CSS が存在します。この動作を効果的にシミュレートし、スクリプトの依存関係を排除する唯一のソリューションです。コツは次のとおりです:

<code class="css">.parent-element-to-video {
    overflow: hidden;
}
video {
    height: 100%;
    width: 177.77777778vh; /* 100 * 16 / 9 (for 16:9 aspect ratio videos) */
    min-width: 100%;
    min-height: 56.25vw; /* 100 * 9 / 16 (for 16:9 aspect ratio videos) */
}</code>

ビデオの高さを 100% に設定すると、親要素の高さに比例して埋められます。計算された幅により、ビデオのアスペクト比が維持されると同時に、必要に応じて親要素全体をカバーするように拡大できます。 min-width と min-height は、ビデオが自然なサイズよりも小さくなるのを防ぎます。

ビデオを中央に配置する

親要素内でビデオを中央に配置するには、次の 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>

このアプローチにより、どのような場合でもビデオが完全に中央に配置されます。

注: ビデオのアスペクト比が異なる場合は、必要な比率を維持するために、それに応じて幅と最小高さを計算します。

以上がビデオや画像などの HTML 要素の「background-size: cover」をシミュレートするにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。