画像を自動リサイズする際に拡大縮小しすぎを防ぐCSS(2ページ目)

画像の自動リサイズで、拡大されすぎたり縮小されすぎたりするのを防ぐ

それでは、画像サイズを自動調整させる際に、画像が拡大されすぎたり縮小されすぎたりするのを防ぐ記述方法をご紹介いたします。まずは、例として使うHTMLソースを掲載しておきます。

<p>
   <img src="sample1.png" alt="サンプル画像1">
</p>

段落(p要素)の中に、画像(img要素)が1つ含まれているだけのシンプルなHTMLソースです。親要素には必ずしもp要素を使う必要はありませんが、ブロックレベルとして表示される要素である必要があります。これ以降にご紹介するCSSソースは、すべて上記のHTMLに対して適用するものです。

なお、以下にご紹介する表示例では、下図のようなPNG画像とJPGE写真の2枚を使っています。拡大された際や縮小された際の問題点が分かりやすい例として、文字が含まれている画像を用意しました。


下記の各サンプルには、それぞれサンプルページも用意しています。解説と併せてサンプルページのHTMLソースもご参照下さい。ソースが読みやすいように、必要なCSSソースはすべてHTML内に直接記述しています。

0. 画像をウインドウ幅に合わせて(自動的に拡大縮小して)表示したい場合

まずは、拡大されすぎたり縮小されすぎたりするのを防がない記述をご紹介しておきます。

img {
   width: 100%;
}

画像をウインドウ幅に合わせて自動的に拡大・縮小して表示するには、上記のようにCSSを記述します。widthプロパティに値「100%」を指定するだけです。ここでの「100%」というのは「親要素の横幅」のことを指します。先ほどのHTMLでは、img要素の親要素はp要素です。p要素には特に装飾を指定していないので、標準では画面サイズ(＝ブラウザのウインドウサイズ)に合致した横幅になります。

したがって、上記のようにwidthプロパティに値「100%」を指定すると、その画像は描画領域の横幅に合わせて際限なく拡大または縮小されるわけです。
→サンプルページを見る(0)


■高さは自動調整されるが……
画像に対してCSSのwidthプロパティで横幅だけを指定すれば、縦横比を維持するように高さも自動調整されます。しかし、HTMLソース側にheight属性を使って高さを記述している場合など他の記述との兼ね合いによっては、縦横比が維持されずに横幅だけが変更されてしまう場合もあります。その際は、下記のようにCSSでheightプロパティに値「auto」を指定しておけば、縦横比を維持して拡大・縮小されます。

img {
   width: 100%;
   height: auto;
}

これ以後にご紹介する記述例では、heightプロパティの記述は省略しています。もし実際に試した際に縦横比が維持されない場合は、上記のようにheightプロパティも追加してみて下さい。

1. 画像をウインドウ幅に合わせて表示したいが、本来の大きさより拡大はしたくない場合

これは「画像を本来の大きさで表示したいが、ウインドウ幅が狭いなら自動縮小したい場合」とも言えます。この場合は、下記のようにCSSソースを記述します。

img {
    max-width: 100%;
}

そもそも、画像に対して何もサイズを指定しなければ、画像は原寸(本来の大きさ)で表示されます。そこにCSSのmax-widthプロパティを使って横幅の最大値を「100%」にしておけば、下記の条件で表示されます。

• 描画領域の幅が狭い場合には、横幅一杯に収まるよう縮小されて表示されるものの、
• 描画領域の幅が充分広ければ、原寸で表示される。

これなら画像の表示サイズが原寸サイズを超えて自動拡大されることはありません。
→サンプルページを見る(1)

2. 画像をウインドウ幅いっぱいに表示したいが、本来の大きさより小さくはしたくない場合

これは「画像を本来の大きさで表示したいが、ウインドウ幅が広いなら自動拡大したい場合」とも言えます。この場合は、下記のようにCSSソースを記述します。

img {
    min-width: 100%;
}

先ほど最大幅を指定するmax-widthプロパティを使ったのとは逆に、最小幅を指定するmin-widthプロパティを使います。この場合は、下記の条件で表示されます。

• 描画領域の幅が広い場合には、横幅一杯に広がるよう拡大されて表示されるものの、
• 描画領域の幅が狭い場合には、原寸サイズのままで表示される。

※ここで、min-widthプロパティに加えてwidthプロパティを併記してしまわないようご注意下さい。あくまでも画像の最小幅(＝min-width)を親要素の幅(＝100%)に合致させるだけです。それだけで済む理由は、下記の2点です。

• 画面幅(＝ブラウザの描画領域の幅)が画像の原寸横幅よりも狭い場合は、親要素(＝ここではp要素)の幅は元々「内部に含まれる画像の原寸サイズ」に合わせて自動拡大されています。そのため、「親要素の幅100％＝画像の原寸横幅」となり、自動縮小はされません。
• 画面幅(＝ブラウザの描画領域の幅)が画像の原寸横幅よりも広い場合は、親要素(＝ここではp要素)の幅は画面幅に一致しています。そのため、「親要素の幅100％＝画面の横幅」となり、自動拡大されます。

なお、描画領域の幅が狭い場合には画像が横方向へはみ出すことになるため、横スクロールバーが表示されます。
→サンプルページを見る(2)

3. 画像をウインドウ幅に合わせて表示したいが、極端に大きくなったり極端に小さくなったりするのは避けたい場合

これは「画像を自動で拡大縮小させたいが、最大幅と最小幅を指定しておきたい場合」とも言えます。この場合は、下記のようにCSSソースを記述します。

img {
       width: 100%;   /* ※A */
   max-width: 850px;  /* ※B */
   min-width: 600px;  /* ※C */
}

widthプロパティ(※A:横幅)に値「100%」を指定した上で、max-widthプロパティ(※B:最大の横幅)と、min-widthプロパティ(※C:最小の横幅)を同時に指定しておきます。

上記のように指定しておけば、画像は描画領域の幅に合わせて自動的に拡大・縮小されるものの、最小サイズより縮小されることはなく、最大サイズより拡大されることもありません。
→サンプルページを見る(3)

4. 画像を拡大も縮小もせず原寸サイズのままで表示したいが、ウインドウ幅が狭いなら表示可能な範囲だけを見せたい場合

掲載内容が重要ではない装飾用途の画像など「全部を見せる必要はないので、表示できる範囲内だけに掲載できれば良い」(＝横スクロールバーを表示してまで全体を見せる必要はない)という場合もあるでしょう。その場合は、下記のようにCSSソースを記述します。

p {
   overflow: hidden;
}

ここでは、これまでにご紹介した0～3の場合と異なり、img要素に対してではなく、img要素の親要素であるp要素に対してCSSを適用します。ここを間違えないようご注意下さい。

画像を含んでいるブロックに対して、overflowプロパティに値「hidden」を指定しておけば、ブロックからはみ出る部分を非表示にできます。このように指定しておけば、描画領域よりも画像の方が大きい場合でもスクロールバーは表示されず、表示可能な範囲だけに画像が表示されます。
→サンプルページを見る(4)


以上、CSSを使って画像の表示サイズを望ましい範囲内で自動調整させる方法4例をご紹介いたしました。最後に、画像をうまく表示するその他の方法をご紹介しておきます。