高さと幅が等しいレスポンシブな正方形 Div を作成するにはどうすればよいですか?

高さと幅が等しいレスポンシブな正方形 Div

あなたの目標は、幅に合わせて高さを自動的に調整する div 要素を作成することです。親要素のサイズに関係なく。これを実現するために、CSS にはシンプルで効果的な解決策があります。

Using Percentage Padding-Bottom:

次の CSS を div に追加します:

height: 0;
width: 20%;
padding-bottom: 20%;
background-color: red;

その仕組みは次のとおりです:

• 高さを設定する
• 幅のパーセンテージを指定します (例: 20%)。
• padding-bottom を幅と同じパーセンテージに設定します。これにより、div の高さが決まります。
• 正方形を表示するために背景色が追加されます。

オプションのネストされた Div:

コンテンツの配置をより柔軟に行うには、正方形の div 内にネストされた div を作成することを検討してください。これにより、必要に応じてコンテンツを中央揃えしたり整列したりできます。

<div>

以上が高さと幅が等しいレスポンシブな正方形 Div を作成するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。