cssで横幅を基準にレスポンシブを保つ方法

横：縦 = 2:1の横長の長方形をレスポンシブにしてみます。
結論から言うと

<div class="wrap">
  <div class="box"></div>
</div>

.wrap{}

.box{
  width:50%;
}
.box::before{
  content: '';
  display:block;
  padding-top:50%;
}

これでおしまいです。
ちなみにwrapはほぼ関係ないです。

なんでこうなった！

仮に

.box{
  width:50%;
  height:50%; /* 自分のwidthの半分だから50% */
}

とできたら簡単ですよね！
ただ、heightの%指定は「自分の親要素（自分を囲っているタグ）」のheightの値を基準にします。
今やりたいのは「自分の横幅」を基準に50%を取得したいのです。（2:1なので）

残念ながら、「自分の横幅」を基準に縦方向を%で指定できるものはありません。
しかし、「自分の親要素の横幅」を基準に縦方向を%で指定できるものがります。

それはpaddingです。

この場合だと個要素を1つ作り、それにpaddingを指定します。

<div class="wrap">
  <div class="box">
    <div class="box__inner"></div> <!-- 1個要素が増えた -->
  </div>
</div>

.wrap{}

.box{
  width:50%;
}
.box__inner{
  padding-top:50%;/* 自分の親要素の横幅を基準に50%を指定できる */
}

こうすると高さ0の.boxを.box__innerがpadding-top:50%;分押し上げてくれるようになります。
ここのpadding-topは親要素（.box）のwidthを基準に計算してくれるので50%✕50%で25%になります（ちょっと語弊があるかもしれないですが。。。）

ただ、この場合だと比率を保ちたいがために、無駄なタグを増やしています。
本当は無駄なタグを挟まずに
「レスポンシブにしたい要素」の「子要素」に「padding-top:50%;」
を指定できればいいんです。

それってわざわざhtmlに書かなくてもcssで書けます。

before擬似要素は「要素の直前に内容を挿入する際に使用します。」
引用 http://www.htmq.com/selector/before.shtml

つまりbefore要素に「padding-top:50%;」を指定すればよいのです。
ただ、before要素はinlineで入ってしまうのでdisplayプロパティを使ってblock要素にしましょう。
また、contentプロパティも入れないと動かないのでご注意を。

それを踏まえて先ほどのhtml, cssを書き換えると

<div class="wrap">
  <div class="box"></div>
</div>

.wrap{}

.box{
  width:50%;
}
.box::before{
  content: '';
  display:block;
  padding-top:50%;
}

これで完成です。

レスポンシブにした後に中に要素を入れたい場合は.boxにposition:relative;を入れて
中に要素を入れてposition:absolute;をフルサイズで入れるしかないようです(:3 」∠ )

縦幅を基準にレスポンシブにしたい場合は

.box{
  width: 50vh;
  height: 50vh;
}

にしましょう！

vh は　Viewport Heightの略でビューポートの高さに対する割合になります。
なので100vhでブラウザの高さと同じです！
今回は50vhなので縦幅の50%の高さにしました！

画像などは勝手にレスポンシブになってくれるので簡単なのですが、意外と要素を比率を保ったままレスポンシブにする方法が難しかったのでまとめました。

参考になれば幸いです。