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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

p img {
   max-width: 100%;
}

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

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

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

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

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

p img {
   width: 100%;
}

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

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

(更新日：2019年09月16日)