CSSでアスペクト比（縦横比）を固定する方法。

HTML

<div class="box">
	<div class="content">コンテンツ内容</div>
</div>

CSS

.box {
  position: relative;
  width: 100%;
}
.box:before {
  content: "";
  display: block;
  padding-top: 75%;
}
.content {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
}

.box:beforeに設定したpadding-topの値を変更することで、アスペクト比（縦横比）をコントロールできる。　

＜算出方法＞
高さの比率　÷　幅の比率　×　100

上記の例では、4：3の比率で設定しています。
3÷4×100＝75（％）

＜アスペクト比の参考＞
4：3・・・・padding-top: 75%;
16:9・・・・padding-top: 56.25%
3：2・・・・padding-top: 66.6%;
黄金比・・・padding-top: 62%;