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

ここで掲載に使用している画像ファイルは、big.jpg です。

■サンプル1

画像の横幅を描画領域の横幅に合わせるだけの例。

友枝記念公園

■サンプル2

画像の横幅を描画領域の横幅に対して75%の大きさに合わせた例。

友枝記念公園

■サンプル3

最大値を指定して、横幅が640pxよりも大きくはならないようにした例。

友枝記念公園

■サンプル4

最大値と最小値を指定して、横幅が310px~640pxの範囲内だけで変化するようにした例。

友枝記念公園

■サンプルVW

親要素は75%に指定されているものの、画像の横幅が(親要素のサイズに関係なく)描画領域の横幅90%のサイズになる例。

※親要素のボックスに背景色が付いています。
友枝記念公園
※親要素のボックスに背景色が付いています。

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