CSS を使用して要素の高さをその幅と動的に一致させるにはどうすればよいですか?

CSS を使用して動的幅に一致するように流体の高さを設定する

特に作業中に、幅を完全に反映する高さを確立するのは難しい場合があります。動的レイアウトを使用します。ただし、賢い CSS テクニックを使用すると、この 1:1 の比率を実現できます。

CSS では、「高さ」プロパティは、「幅と同じ」などのさまざまな測定単位を受け入れます。残念ながら、この値は現在の CSS 実装には存在しません。

幸いなことに、「display」プロパティと「position」プロパティをダミー要素とともに利用する回避策が登場しました。この解決策には以下が含まれます:

1. コンテナ要素を「インラインブロック」および「相対」配置に設定します。
2. 目的のアスペクトを生成するマージントップ値を持つダミー要素を追加します。比率。この例では、4:3 のアスペクト比が使用されています (75% マージントップ)。
3. コンテナ内に絶対要素を配置して、利用可能なスペース全体を引き伸ばして埋めます。

この手法を採用すると、絶対要素はその動的な性質に関係なく、コンテナの幅に合わせて高さを自動的に調整します。ダミー要素は、初期アスペクト比を設定するプレースホルダーとして機能し、さまざまな比率を実現するために変更できます。

このソリューションは、一貫した高さと幅の比率で動的な流体レイアウトを作成するクリーンで効果的な方法を提供します。 CSS のみを使用します。

以上がCSS を使用して要素の高さをその幅と動的に一致させるにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。