小粋空間  -  a cheap joke and a play on words site

CSSでブラウザのウィンドウサイズに合わせて画像を拡大・縮小する方法

ブラウザのウィンドウサイズに合わせて画像を拡大・縮小する方法です。ここではCSSを使った方法を紹介します。

動作は主要ブラウザ（IE/FF/Chrome/Safari/Opera）の現時点での最新版で確認しています。

動作確認は以下のサンプルをご利用ください。

サンプル

１．ウィンドウの高さに合わせて画像を拡大・縮小する

ウィンドウの高さにあわせて画像を拡大・縮小するには、次のようにします。

HTML

<div id="box">
  <img src="画像のURL" alt="coffee" />
</div>

CSS

#box {
  height: 20%;
}
#box img {
  height: 100%;
}

img要素を括ったdiv要素にheightプロパティを設定し、画像の高さを%で指定します。また、img要素に「height:100%」を設定します。

２．ウィンドウの幅に合わせて画像を拡大・縮小する

ウィンドウの幅にあわせて画像を拡大・縮小するには、次のようにします。

HTML

<div id="box">
  <img src="画像のURL" alt="coffee" />
</div>

CSS

#box {
  width: 20%;
}
#box img {
  width: 100%;
}

img要素を括ったdiv要素にwidthプロパティを設定し、画像の幅を%で指定します。また、img要素に「width:100%」を設定します。

３．画像の拡大・縮小サイズを制限する

ウィンドウの高さにあわせて画像の拡大・縮小サイズを制限するには、div要素にmax-heightプロパティ、min-heightプロパティを設定します。

#box {
  height: 20%;
  max-height: 256px;
  min-height: 10px;
}

ウィンドウの幅にあわせて画像の拡大・縮小サイズを制限するには、div要素にmax-widthプロパティ、min-widthプロパティを設定します。

#box {
  width: 20%;
  max-width: 256px;
  min-width: 10px;
}

このテクニックはFirefoxのホームページを参考にしています。

４．文字サイズをブラウザのウィンドウサイズに合わせて拡大・縮小する

本題からそれますが、文字サイズをブラウザのウィンドウサイズに合わせて拡大・縮小する方法もあります。詳細は以下のエントリーをご覧ください。

ブラウザの幅にあわせてフォントサイズを拡大・縮小するjQueryプラグイン「FitText」