ウインドウ幅に合わせて画像幅を変化させるHTML+CSSサンプルページ(2A)

■サンプル(srcset版)

表示幅600pxを基準にして、それを下回ったら「mini.jpg」(狭い描画領域用にデザインした画像)を表示に使い、上回ったら「big.jpg」(広い描画領域用にデザインした画像)を表示に使います。

友枝記念公園

◀ 現在の横幅は 600px を超えています。 ▶ ◀ 現在の横幅は 599px 以下です。 ▶

※このサンプルの動作をChromeで確認したい場合には、下記の点に注意して下さい。
Chromeでは、ウインドウサイズを変えても画像が切り替わらない場合があります。具体的には、小画像が表示されている状態でウインドウ幅を広げると大画像に自動で切り替わりますが、大画像が表示されている状態でウインドウ幅を狭めても小画像には切り替わりません。また、画像がブラウザ内でキャッシュされている状態でも画像は切り替わりません。
Chromeで確認したい場合の対処方法につては、解説記事内に記載した注釈をご参照下さい。

サンプルページ2Bを見る

解説記事「ウインドウ幅に合わせて画像サイズを変化させる方法」に戻る