画像の表示サイズを画面幅(ウインドウ幅)に自動で合わせたいが……

画面幅に合わせて画像も変化

画面幅に合わせて画像も変化

画像の掲載サイズを、画面幅(ブラウザのウインドウサイズ)に合わせて自動変化させる方法については、過去の記事「ウインドウ幅に合わせて画像サイズを変化させる方法」でもご紹介致しました。右図のように、閲覧者の画面幅がどんな大きさでも、ぴったり合うように画像サイズを自動変更させられます。

この方法は、スマートフォンやPCなどの様々な環境に合わせて画像サイズをうまく自動調整できるため、とても便利です。


 
過剰に縮小されると困ることも

過剰に縮小されると困ることも

しかし、スマートフォンのような小型画面に対しても、デスクトップPCのような大型画面に対しても、常に横幅一杯になるよう表示させると、
  • 画像が過剰に拡大されてしまう
  • 画像が過剰に縮小されてしまう
という問題が出てくることもあります。


 

拡大されすぎたり縮小されすぎたりするのを防ぐ

画像の最大幅・最小幅を限定する

画像の最大幅・最小幅を限定する例

このように拡大されすぎたり縮小されすぎたりする問題の解決策としては、スタイルシート(CSS)を使って「拡大・縮小範囲を限定しておく」などの方法があります。

今回は、下記のような「画像の表示サイズを自動で閲覧環境に合わせたい場合に遭遇する、ちょっとした問題を解決するための方法」を例にして、そのCSSの記述方法をご紹介致します。

(1) 画像をウインドウ幅に合わせて表示したいが、本来の大きさより拡大はしたくない場合。
(2) 画像を本来の大きさで表示したいが、ウインドウ幅が狭いなら自動縮小したい場合。
(3) 画像をウインドウ幅に合わせて表示したいが、極端に大きくなったり極端に小さくなったりするのは避けたい場合。
(4) 画像を拡大も縮小もせず、原寸のまま、表示可能な範囲だけを見せたい場合。
(5) 画像を拡大も縮小もせず、原寸のまま、表示可能な範囲だけを見せたいが、ウインドウ幅が広いなら繰り返し複数個を並べて表示したい場合。

それでは、次のページから1つずつ見ていきましょう