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

■サンプル(@media版)

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

友枝記念公園 友枝記念公園

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

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

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