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

レスポンシブな正方形の Div の作成

質問:

CSS で div 要素をデザインするにはどうすればよいですか?親要素として正方形のアスペクト比を維持し、幅に比例して高さを調整しますサイズ変更しますか?

答え:

パディングを使用してこれを実現する簡単なテクニックがあります:

1. div の高さを 0 に設定します。これにより、ブラウザを「騙して」高さを柔軟にします。
2. div の幅を定義します。
3. padding-bottom を幅と同じパーセンテージに設定します。これにより、正方形のアスペクト比を維持するためにブラウザに高さの調整が強制されます。

コード サンプルは次のとおりです:

<div>

最も外側の div は正方形の形状を確立し、内側の div は正方形の形状を確立します。実際の内容が含まれています。このアプローチでは、親要素の幅が変化しても正方形のアスペクト比が効果的に維持されます。ほとんどのブラウザと互換性があります。

実際の例は jsfiddle にあります: [ここに jsfiddle リンクを挿入]

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