解 説

HTML側のimgタグで実現する方法

画質とかはあまり気にしないけれども、ブラウザを大きくしても小さくしてもいっぱいに画像を広げておきたい場合の方法です。

html側の設定

CSS側の設定

CSSにheight: auto と width: 100%を設定するだけです。

サンプル

CSS側の背景画像で実現する方法

背景なのだからこれはやっぱりCSS側の背景画像で設定したいものですね。
こちらはCSS3で対応しています。IE9以前のブラウザ以外は使えそうです。

CSSの背景画像を使用した例

html側の設定

CSS側の設定

CSS3のbackground-size:coverを使用するとOKです。

サンプル