☰

高さは動的な幅に等しい（CSS フルイドレイアウト） [重複] 質問する

tag-icon • tag-icon javascript jquery html css responsive-design
高さは動的な幅に等しい（CSS フルイドレイアウト） [重複] 質問する

高さと幅を同じ（比率 1:1）に設定することは可能ですか?

例

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

CS

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

ベストアンサー1

[更新: このトリックは私が独自に発見したものですが、その後、ティエリー・コブレンツ先を越されました。彼の2009年の記事A List Apart に掲載。正当な評価は当然のものとして。

これは古い質問だとは思いますが、私も似たような問題に遭遇し、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 id="container">
  <div id="dummy"></div>
  <div id="element">
    some text
  </div>
</div>

おすすめ記事