動的幅と同じ高さの CSS Div を作成するにはどうすればよいですか?

動的幅に一致する高さ: CSS 流体レイアウト

視覚的にバランスの取れたデザインを実現することを目指して、開発者は多くの場合、高さを揃えようとします。要素をその幅に合わせます。この質問は、一般的なデザインの課題、つまり、幅を動的に変更しながら 1:1 のアスペクト比を維持しながら、高さと幅が等しい div を作成する方法について説明します。

提案された解決策には、事前定義されたアスペクト比を持つプレースホルダー要素。メイン要素をプレースホルダー内に配置すると、メイン要素の幅が変わってもアスペクト比が維持されます。重要なのは、position や margin-top などの CSS プロパティを活用して、要素を戦略的に配置し、要素の寸法の比例を確保することです。

次のコード スニペットは、そのアプローチを示しています。

#container {
  display: inline-block;
  position: relative;
  width: 50%;
}

#dummy {
  margin-top: 75%;
  /* 4:3 aspect ratio */
}

#element {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: silver/* show me! */
}

この中でたとえば、#container は div の動的な幅を確立します。 #dummy 要素は、margin-top プロパティによって実現される固定アスペクト比 4:3 のプレースホルダーとして使用されます。 #要素は #dummy 内に絶対的に配置され、領域全体を埋め、幅と同じ 1:1 の比率が維持されるようにします。

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