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

"CSS Tips Factory" : Presented by Nishishi via WordPress.

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

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

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

▼前者の場合(描画領域に合わせて拡大したり縮小したりする)は、画像に対してwidthプロパティを使うだけで済みます。

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

▼後者の場合(原寸より大きくはしたくない場合)も実は簡単で、max-widthプロパティを使えば実現できます。

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

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

  • width: 100%;は「親ブロックの横幅に一致するように拡大縮小する」という指示になり、
  • max-width: 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%にした際、親ボックスからはみ出すのを防ぐ」をご参照下さい。

《2016/03/19 10:10 改訂》
《2014年6月25日 10:16 初版公開》

スタイルシートTipsの主要なカテゴリ

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

▲各カテゴリ毎に、TIPSのタイトルと概要を一覧できます。ぜひ、いろいろ覗いてみて下さい!

著者紹介

Twitter:にしし/西村文宏
にしし/西村文宏 on facebook にしし/西村文宏 on mixi にしし/西村文宏 on Google+

関連書籍・関連ソフトなど

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