CSS 要素の高さをその幅と動的に等しくするにはどうすればよいですか?

流動的な CSS レイアウトで高さが動的幅と等しいことを確認する

CSS では、要素の高さをその幅と同じに設定して、要素の高さを維持します。正方形のアスペクト比は難しい場合があります。この質問では、この動的レイアウトを実現するための CSS のみのソリューションを検討します。

この解決策には、マージントップをパーセンテージとして設定した空のダミー要素を作成することが含まれます。このパーセンテージは、目的の形状のアスペクト比を表します。たとえば、アスペクト比 1:1 のマージントップは 100% になります。

コンテナ要素内に、絶対配置で追加の要素が追加されます。希望の背景色でスタイル設定されたこの要素は、コンテナ全体を埋めるように引き伸ばされ、コンテナの幅に合わせて自動的に調整される正方形のアスペクト比になります。

このトリックは、要素の高さがその幅と同じになるため、CSS で正方形のアスペクト比を持つ動的で流動的なレイアウトを作成できます。

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