縦横比を維持したまま横幅に応じて伸び縮みするブロックの作り方です。

※通常であれば、画像の場合 "width: 100; height: auto;" としておけばそれで済む話なのでちょっと特殊です。 例えばyoutubeの埋め込み要素などを入れるとレスポンシブ動画プレーヤーになるのでオススメです。

HTML

<div class="wrap">
    <img src="_img/a.jpg">
</div>

CSS

.wrap {
    position: relative;
    width: 100%;
    height: 0;
    overflow: hidden;
    padding-bottom: 100%;
    background: #f00;
}
.wrap img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

解説

ラッパー要素（div.wrap）の中に入れているのは画像要素ですが、これはなにでも構いません。

ミソはラッパー要素の "height: 0;" と "padding-bottom: 100%;" です。heightを0にしてpaddingで高さをとっているのです。ブロック要素の縦方向への margin / padding などのパーセント値は、横幅に対する値となるので 100% とすると正方形になります。比率を 3:2 にしたければラッパー要素に対して "padding-bottom: 67%;" とすればOKです。

---

2015/12/18 森 追記

::after擬似要素を使用するサンプルです。ラッパー要素の高さを0にしないで良いのでいろいろと都合が良いです。

.wrap {
    position: relative;
    width: 100%;
    overflow: hidden;
    background: #f00;
}
.wrap::after {
    content: "";
    display: block;
    padding-bottom: 100%;
}
.wrap img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}