CSSを使用して高さに基づいてDivアスペクト比を維持する方法は?

CSS を使用した高さに基づく Div アスペクト比の維持

特定のシナリオでは、要素の幅が一定の割合のままであることを確認する必要がある場合があります。高さの変動に関係なく、その高さ。これには JavaScript ソリューションが存在しますが、CSS も洗練されたアプローチを提供する可能性があります。

これを実現するには、アスペクト比プロパティを利用します。

<code class="css">.box {
  height: 50%;
  background-color: #3CF;
  aspect-ratio: 2 / 1;
}</code>

アスペクト比プロパティが実際に使用される場所は次のとおりです。 Shines:

• 要素の高さと幅の間に固定された関係が確立されます。
• その結果、ボックスのアスペクト比 (この場合は 2:1) は、要素の高さと幅に関係なく維持されます。ウィンドウの高さが変更されます。

このソリューションにより、ウィンドウが垂直方向にサイズ変更された場合でも、要素の幅は常に高さの 50% になります。

以上がCSSを使用して高さに基づいてDivアスペクト比を維持する方法は?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。