CSSだけでアスペクト比を固定するテク

Javascriptを使わず、CSSだけでimgやdivやiframeのアスペクト比を固定したままコンテナに合わせてリサイズする方法です。
レスポンシブなデザインの場合は端末の画面サイズに合わせて要素の幅を変える必要があるので、こういうテクニックを使ってアスペクト比を固定してやります。

imgの場合

HTML

<img src="http://mrg.bz/Gl2K6Z" />

CSS

img {
    width: 100%;
    height: auto;
}

デモ

imgタグはheight: autoが使えるので簡単ですね。

divやpなどのブロック要素の場合

HTML

<div id="wrapper">
    <div id="content">hogehoge fugafuga</div>
</div>

CSS

#wrapper {
    position: relative;
    width: 100%;
}
#wrapper:before {
    content:"";
    display: block;
    padding-top: 75%; /* 高さを幅の75%に固定 */
}
#content {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
}

デモ

ブロック要素の場合はラッパーで囲んだ上、ちょっとトリッキーなテクニックが必要です。
なんでこう書くと上手く動くのかは必要に応じてググればいいので割愛します。
1つ覚えておかないといけないのは**#wrapper:beforeに設定したpadding-top**の値によってアスペクト比をコントロール出来るということです。
上の例では幅:高さの比を4:3にするために75%という値を使ってます。
この値は以下の式で求めることが出来ます。

高さの比率 ÷ 幅の比率 × 100

上の例では4:3に固定したいので、3/4*100で75となります。

iframeの場合

iframeは埋め込み動画なんかで出番が多いですね。

HTML

<div id="wrapper">
    <iframe id="content" src="https://player.vimeo.com/video/98746172" frameborder="0"></iframe>
</div>

CSS

#wrapper {
    position: relative;
    width: 100%;
}
#wrapper:before {
    content:"";
    display: block;
    padding-top: 56.25%; /* 高さと幅の比を16:9に固定。9/16*100=56.25 */
}
#content {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

デモ

ブロック要素の場合にかなり似てるんですが、#contentでwidthとheightに**100%**を指定しているというところだけが違っています。

IEは？

IEって何ですか？
と言いたいところですが、IE7まではこのテクニックが使えないはずです。
JSで何とかしましょう。

参考

• http://stackoverflow.com/questions/5445491/height-equal-to-dynamic-width-css-fluid-layout
• http://www.mademyday.de/css-height-equals-width-with-pure-css.html