CSSで、高さを基準とした正方形を描画したい

Question

CSSで、高さを基準にした正方形を描画したいです。
高さが固定ではないので、
height:200px;width:200px;
のような手法は使えません。
一体どのようにしたら高さを基準にした正方形を描画できるのでしょうか？

Answer 1

<div>hoge</div>

	div{
		width: 100vh;
		height: 100vh;
		background: #f00;
	}

じゃダメですか？
vhを理解する環境でないと使えませんが。
（※vhはviewportの高さを基準とする相対単位）

Answer 2

高さがウィンドウ全体に対しての割合だと、すでに出てるビューポートがいいと思いますが、ウィンドウは関係なくて親要素に対して%指定だと難しいと思います。

CSSだけでなくなりますが、JavaScriptで操作したくないという意味なら、imgタグに 1px × 1px の透過GIFをつけて、そのimgタグにheight:10%;などやれば楽にできます。
色や模様をを付けたいならimgタグのbackgroundをいろいろ。

imgタグ作りたくないとなれば JavaScript つかうことになるんじゃないでしょうか。

Answer 3

こんな感じでどうですか？

<div class="wrap">
  <div class="box ratio-1_1">
    <div class="inner">
      <p>1 : 1</p>
    </div>
  </div>
</div>

.box {
  position: relative;
  width: 50%;
  height: auto;
  background: #A53860;
}
.ratio-1_1:before {
  content: "";
  display: block;
  padding-top: 100%; /* 1:1 */
}
.inner {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.inner p{
  color: #fff;
}

出力結果
https://jsfiddle.net/hokuto/8uL6gohL/

Comments

[MasakazuFukami]

おそらくこれだと横幅に対して対応する正方形ではないでしょうか？？

Answer 4

.soto {
  width:0px;
  height:0px;
  margin:0;
  padding:0;
}
.naka {
  margin:0;
  padding:100px;
  background-color:red;
}

<div class="soto"><div class="naka"></div></div>

正方形は縦も横も同じ大きさなので、縦を基準にというより一つのパラメータだけでといった形です。
他にも次のような問題があります。
・正方形を書く以外のことを一切考慮していない。
・指定値の倍の大きさになる。padding:100pxで200pxの正方形に
(chromeではpadding:100.5pxで201pxの正方形が描画されましたが、他のブラウザでは不明)
・divが空なのでブラウザによっては消えるかも
(chromeで動作確認。200pxの正方形が表示されました)

Comments

[退会済みユーザー]

親要素の高さがレスポンシブに変わるので、このソースだと対応できない気がします :(

[hirohiro]

あら、駄目ですか。親要素というのはclass="soto"のさらに外側のことでしょうか？
そちらもoverflow:visible(初期値)なら多分正方形で居続けると思います。
これは空っぽで大きさゼロのdiv class="naka"がpaddingで膨れ上がり背景塗りだけの存在になり、それが大きさゼロのdiv class="soto"の外側にはみ出て表示されるという設計なので、HTMLコードに書いたdiv2つはセットで扱います。中には何も書けません。外側全てがoverflow:visibleならあらゆる他のデザインを無視して正方形で居続ける……予定。