ブラウザいっぱいに画像を広げたい

HTML&CSS

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側の背景画像で設定したいものですね。
こちらはCSS3で対応しています。IE9以前のブラウザ以外は使えそうです。

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

サンプル

スポンサーリンク

お勧め書籍

AI関連

Python

JavaScript

HTML CSS関連

統計学

HTML&CSS
スポンサーリンク
dororoをフォローする
IT工房|AI入門とWeb開発
タイトルとURLをコピーしました