CSS を使用してレスポンシブな正方形の Div を作成するにはどうすればよいですか?

CSS を使用して応答性の高い正方形の Div を作成する方法?

以前に質問されたこの質問は、幅に合わせて div の高さを動的に変更する方法を求めています。幅はパーセンテージで表現されるため、親要素の幅が減少すると、div も比例して縮小する必要があります。

これに対処するには、CSS の padding-bottom プロパティを使用できます。 padding-bottom をパーセンテージとして設定することで、div の高さと幅の比率を作成し、それらが等しくなるようにすることができます。

コードの例を次に示します。

<div>

この例では、コードでは、外側の div は幅: 20%、高さ: 0 を使用して正方形の形状を確立します。20% のパディングボトムは高さと幅の比率を設定し、結果としてアスペクト比 1:1。内部 div には実際のコンテンツが含まれています。

さらに、機能を紹介するために JavaScript Fiddle のデモが提供されています: [Fiddle へのリンク]

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