ブラウザいっぱいに画像を広げたい | IT工房

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

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

html側の設定

<div id="wrapper"><img src="azumino0011.jpg" ></div>

CSS側の設定

#wrapper img {
	height: auto;
	width: 100%;
}

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

サンプル

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

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

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

html側の設定

<div id="wrapper">あああああああああ</div>

CSS側の設定

html,body,#wrapper{width:100%;height:100%;margin:0;padding:0;}
#wrapper {
background-image:url(azumino0011.jpg);
background-position:center top;
background-repeat:no-repeat;
-moz-background-size:cover;
background-size:cover;
}

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

サンプル