にしし ふぁくとりー(西村文宏 個人サイト)

"CSS Tips Factory" : Presented by Nishishi. Since 1997.

画像の横幅をウインドウ幅に合わせたいが、原寸より大きくはしたくない場合のCSS [イメージ,]

画像を描画領域の横幅いっぱいに表示したいけども、原寸サイズを超えて拡大はさせたくない、という場合がありますよね? つまり、画像より描画領域(ブラウザのウインドウや端末の画面)の方が狭い場合は「横幅一杯になるように自動縮小させたい」けども、描画領域の方が広い場合は自動拡大はせずに原寸サイズで表示したい、というケースが。特にレスポンシブ・ウェブデザインを採用している場合などで。そんな画像の表示方法もCSSなら簡単です。

画像の横幅をウインドウ幅に合わせたいが、原寸より大きくはしたくない場合のCSS

画像を描画領域の横幅一杯に表示したいと思うことがあります。とはいえ、そのときの望みには以下の2種類がありそうな気がします。

  • 「とにかく描画領域の横方向を全部使って画像を表示したい」(=描画領域の横幅に合わせて画像を自動で拡大・縮小する)
  • 「描画領域が狭い場合には、描画領域を最大限使って画像を表示したい。でも、描画領域が十分な場合は、特に原寸よりも拡大はしたくない。」(=画像は自動で縮小するが、拡大はしない)

どちらの場合でも、CSS(スタイルシート)を使えば簡単に自動サイズ調整が実現できます。

▼前者の場合(=描画領域の横幅に合わせて自動で拡大したり縮小したりする表示)

画像に対して、widthプロパティを使うだけで済みます。

CSSソース

img {
   width: 100%;  /* 横幅に合わせて自動で拡大縮小する */
}

これはまあ当たり前というか、簡単ですよね。

▼後者の場合(=描画領域の横幅いっぱいになるよう自動でサイズ調整はするが、原寸より大きくはしたくない場合)

画像を「自動で縮小するのに、自動で拡大はしない」という要望は一見複雑に感じられるかもしれません。が、実はこの装飾もとても簡単です。max-widthプロパティを使うだけで実現できます。

CSSソース

img {
   max-width: 100%;  /* 横幅に合わせて自動縮小するが、拡大はしない */
}

たったこれだけです。
widthプロパティの値に「%」を使って割合で指定した場合は、親となるブロックの横幅に対する割合を指定したことになります。つまり、

  • width: 100%;は「親ブロックの横幅に一致するように拡大縮小する」という指示になり、
  • max-width: 100%;は「最大でも親ブロックの横幅に一致させる(=親ブロックよりも画像の方が大きいなら画像を自動縮小させる)」という指示になる

というわけです。
なので、後者のmax-width: 100%;を使った場合は、「親ブロックの方が狭ければ、画像の横幅を親ブロックの100%にまで縮小する」&「親ブロックの方が広ければ、横幅は特に指定しない(=画像の元々のサイズで表示する)」という描画になります。

画像の横幅をウインドウ幅に合わせたいが、原寸より大きくはしたくない場合の表示例

以下に表示サンプルを2つ掲載しています。それぞれ、画像の原寸の横幅は、400pxと600pxです。
ウインドウの横幅を変化させてみて下さい。ウインドウ幅が狭くなると、画像は描画領域に合わせて自動で縮小されます。でも、ウインドウ幅が(画像の横幅よりも)広い場合は、特に拡大はされずに原寸のままで表示されます。

▼サンプル川画像1(原寸:400×180)
川
▼サンプル川画像2(原寸:600×400)
川

上記のサンプルを作るソースは、以下の通りです。

HTMLソース

<p>
   ▼サンプル川画像1(原寸:400×180)<br>
   <img src="./images/summerriver.jpg" alt="川"><br>
   ▼サンプル川画像2(原寸:600×400)<br>
   <img src="./images/fallriver.jpg" alt="川"><br>
</p>

CSSソース

p img {
   max-width: 100%;
}

上記のように、max-widthプロパティを使うことで、「描画領域の横幅が狭ければ、自動的に縮小」&「描画領域の横幅が十分なら、原寸で表示」というデザインを実現しています。

自動縮小だけでなく自動拡大もしたい場合の表示例

ちなみに、「原寸よりも大きくなっても構わないので、とにかく描画領域いっぱいに表示させたい」という場合の例は以下の通りです。
以下のサンプルでは、原寸の横幅400pxの画像を掲載していますが、描画領域の幅に合わせて、400pxより大きくも小さくもなります。

▼サンプル川画像1(原寸:400×180)
川

今お使いの環境が、横幅400pxを越えていれば(※ここでは余白の分量は無視して説明しています)、画像は原寸よりも拡大されて表示されているはずです。
これを実現するソースは紹介するまでもないでしょうが、以下の通りです。

HTMLソース

<p>
   ▼サンプル川画像1(原寸:400×180)<br>
   <img src="./images/summerriver.jpg" alt="川"><br>
</p>

CSSソース

p img {
   width: 100%;
}

先ほどのmax-widthプロパティの場合とは違って、上記のようにwidthプロパティに値100%を指定すれば、拡大も縮小もするようになります。

というわけで、「画像の横幅をウインドウ幅に合わせたいが、原寸より大きくはしたくない場合」の紹介でした。
(ついでに、原寸より大きくなっても構わない場合の方法も紹介しましたが。^^;
どちらにせよ、とても簡単ですよね。)

※なお、画像をウインドウ幅にあわせるべく「100%」を指定した結果、親ボックスよりもはみ出してしまう……! という場合には、別途、All Aboutで書いた記事「横幅を100%にした際、親ボックスからはみ出すのを防ぐ」をご参照下さい。


()

スタイルシートTipsふぁくとりーの主要なカテゴリ

下記のカテゴリに区分して、スタイルシートに関するTIPSを公開しています。カッコ内の数字は、該当する記事の件数です。

著者紹介


にしし(西村文宏)

にししでございます。本書いたり記事書いたりしてます。あと萌えたり。著書5冊発売中です(Web製作系4冊+小説1冊)。著書や記事は「西村文宏」名義。記事は主にAll Aboutで連載。本の最新刊は2011年3月に発売されたライトノベルでございますよ。

Twitter:にしし/西村文宏
にしし/西村文宏 on facebook にしし/西村文宏 on mixi にしし/西村文宏 on Google+ フォローはお気軽に!

にしし(西村文宏)連絡先
☕ コーヒーをおごる

著書一覧と詳細

関連するかもしれない情報

▼当サイト内外で関連しそうな記事などが自動表示されています。(たぶん)

--- 当サイト内を検索 ---