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です。
