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

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

Posted at January 3,2012 1:23 AM
Tag:[CSS]

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

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

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

サンプル
サンプル

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

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

HTML

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

CSS

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

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

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

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

HTML

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

CSS

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

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

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

ウィンドウの高さにあわせて画像の拡大・縮小サイズを制限するには、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のホームページを参考にしています。

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

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

ブラウザの幅にあわせてフォントサイズを拡大・縮小するjQueryプラグイン「FitText」
関連記事
zenback
人気エントリー
トラックバックURL


コメントする
greeting

*必須

*必須(非表示)


ご質問のコメントの回答については、内容あるいは多忙の場合、1週間以上かかる場合があります。また、すべてのご質問にはお答えできない可能性があります。予めご了承ください。

太字イタリックアンダーラインハイパーリンク引用
[サインインしない場合はここにCAPTCHAを表示します]

コメント投稿後にScript Errorや500エラーが表示された場合は、すぐに再送信せず、ブラウザの「戻る」ボタンで一旦エントリーのページに戻り(プレビュー画面で投稿した場合は、投稿内容をマウスコピーしてからエントリーのページに戻り)、ブラウザをリロードして投稿コメントが反映されていることを確認してください。

コメント欄に(X)HTMLタグやMTタグを記述される場合、「<」は「&lt;」、「>」は「&gt;」と入力してください。例えば「<$MTBlogURL$>」は「&lt;$MTBlogURL$&gt;」となります(全て半角文字)