CSS は要素の高さと幅を動的に一致させることで 1:1 のアスペクト比を維持できますか?

CSS Fluid Layout で高さと幅を動的に一致させる

Fluid CSS レイアウトでは、要素は利用可能なスペースに基づいてサイズを自動的に調整できます。これは、正方形や長方形などの特定のアスペクト比を維持しようとする場合に問題が生じる可能性があります。

質問:

CSS を使用して高さを設定できますか?要素はその幅と同じになり、1:1 の縦横比を維持します。 rate?

例:

次の構造を持つコンテナ要素とネストされた div 要素を考えてみましょう。レイアウト:

+----------+
| body     |
| 1:3      |
|          |
| +------+ |
| | div  | |
| | 1:1  | |
| +------+ |
|          |
|          |
|          |
|          |
|          |
+----------+

CSS:

div {
  width: 80%;
  height: same-as-width
}

解決策:

高さの設定はできませんが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! */
}

<div>

ダミー要素の margin-top プロパティを使用し、それを 75% (4:3 のアスペクト比に一致させるため) に設定することで、高さの参照を作成します。要素はこの参照領域内に絶対的に配置され、高さは幅と同じになります。

以上がCSS は要素の高さと幅を動的に一致させることで 1:1 のアスペクト比を維持できますか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。