レスポンシブでwidthとmax-widthを使った画像の表示を確認する

300px X 300px の画像を用意して、ウィンドウ幅を大きくした場合と小さくした場合の画像の変化を確認します。基本的な内容ですが、落とし穴がありそうなのでここで確認しておく必要を感じました。

確認は以下の4通り行います。

1. CSSで何も指定しない場合の表示
2. CSSでimg要素を [width:100%] にした場合の表示
3. CSSでimg要素を [max-widt:100%]にした場合の表示
4. CSSでimg要素を [max-width:ピクセル指定] した場合の表示

１．CSSで何も指定しない場合の表示

HTML

<img src="img/mazda_axela300-300.jpg" alt="#">

元の画像　300px X 300px

ウィンドウの横幅を300pxを超えるサイズにしても画像は拡大されません。

ウィンドウの横幅を300pxより小さくしても画像は縮小されません。

縦幅を同時に小さくしても画像は縮小されません。

２．CSSでimg要素を [width:100%] にした場合の表示

HTML

<img src="img/mazda_axela300-300.jpg" alt="#">

CSS

img {
width: 100%;
}

元の画像　300px X 300px

ウィンドウの横幅を300pxを超えるサイズにすると、画像は縦横同じ比で拡大されます。

img要素に [width:100%] とすると、画像はウィンドウの横幅と同じになるように拡大します。

ウィンドウの縦幅は大きくしても画像は拡大されません。

ウィンドウの横幅を300pxより小さくすると画像は縦横同じ比で縮小されます。

img要素に [width:100%] とすると、画像はウィンドウ幅と同じになるように縮小します。

ウィンドウの縦幅は小さくしても画像は縮小されません。

３．CSSでimg要素を [max-width:100%]にした場合の表示

HTML

<img src="img/mazda_axela300-300.jpg" alt="#">

CSS

img {
max-width: 100%;
}

元の画像　300px X 300px

ウィンドウの横幅を300pxを超えるサイズにしても、画像は拡大されません。

img要素を [max-width:100%] にすると、画像は元画像の300pxを超えて拡大しません。

ウィンドウの横幅を300pxより小さくすると画像は縦横同じ比で縮小されます。

img要素を [max-width:100%] にすると、[width:100%] にしたのと同じ表示になります。

４．CSSでimg要素を [max-width:ピクセル指定] した場合の表示

HTML

<img src="img/mazda_axela300-300.jpg" alt="#">

CSS

img {
max-width: 400px;　　<=これだけではCSSに何も指定しなかったのと同じ表示
}

[max-width:ピクセル指定] を指定しただけでは、CSSに何も指定しなかった場合と同じ表示になります。例えば [max-width:400px] としても、元画像の300pxを超えて拡大はしません。また、縮小もしません。

400pxまで画像を拡大させ縮小も可能にするには、同時に [width:100%] の指定が必要になります。

CSS

img {
max-width: 400px;
width: 100%;
}

元の画像　300px X 300px

ウィンドウの横幅を300pxを超えるサイズにすると、画像は縦横同じ比で400pxまで拡大されます。

ウィンドウの横幅を300pxより小さくすると画像は縦横同じ比で縮小されます。

img要素を [width:100%] にしたのと同じ表示になります。