【HTML+CSS+Javascript+JQuery】要素の幅に合わせて高さを変える方法

ずばり、こうやる

<script type="text/javascript">
  // 初期サイズ
  var w = $("#要素ID").width(); // 要素の横幅を取得
  $("#要素ID").height(w * (縦横比)) // 要素の高さを計算して設定

  // 画面サイズの変更検知時の処理を定義
  $(window).resize(function(){
    var w = $("要素ID").width(); // 要素の横幅を取得
    $("要素ID").height(w * (縦横比)); // 要素の高さを計算して設定
  });
</script>

解説

1. まず要素の幅を取ります。
2. 横幅×縦横比で立幅を求め、heightメソッドで高さを設定
3. 後から画面幅を変更された場合の処理も定義(画面サイズ変更されるたびに上記と同じ処理をする)

CSSだけで指定できれば良いのにね

要素の横幅はパーセントで指定で良いですが、高さははそうもいかないこと多いですよね。
cssはcalc関数が使えますが、高さの計算時に横幅の値を使いたいけどできないのがもどかしい。
CSSだけでは高さの指定時に横幅は一切考慮できない、だからどうしてもJavascriptのお世話になります。
見た目に関するところは出来る限りプログラミング的な要素を無くしたいですよね。
コードが汚くなるしメンテナンスが大変なので。