ホームページ > 記事 > ウェブフロントエンド > ビデオや画像などの 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 サイトの他の関連記事を参照してください。