ダミー要素を使用して CSS で流動的な正方形レイアウトを作成する方法

高さと幅が等しい流体レイアウトの作成

CSS では、要素の高さを要素の高さと同じになるように動的に設定できます。幅を調整し、正方形のアスペクト比を作成します。これを実現するために、「ダミー要素」メソッドとして知られる賢いテクニックを利用します。

手順:

1. display: inline を使用してコンテナ div 要素を定義します。 -block と位置:相対。
2. マージントップが次と等しい「ダミー」要素をコンテナ内に作成します。 75%。これにより、4:3 のアスペクト比が確立されます。
3. コンテナ内に絶対要素 (#element) を配置します。これにより、コンテナの高さと幅が埋められます。

例:

結果:

この手法は効果的に#element div の高さが #container の指定された幅に基づいて動的に調整される流体レイアウト部コンテナのサイズを変更しても、要素は正方形の比率を維持します。

以上がダミー要素を使用して CSS で流動的な正方形レイアウトを作成する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。