画像サイズを画面に合わせて伸縮させる

2014年3月5日

画像など、ウィンドウサイズに合わせて伸縮させるCSS。

img
	{
	max-width: 100%;
      height: auto;
	}

ただし、伸縮させたい画像を置くボックスに親要素がある場合は、
親のボックス指定を画像を置くボックス同様、%で指定する必要
があるので注意。
実際に使ったコード(桶ちゃんギャラリー部分で)
※imgで幅も高さも指定しないこと。
html

<div id="wrapp" class="content">
 <img src="images/landscape/lc-02.png" alt=""/>
 </div>

css

#wrapp
 	{
	margin: 0 auto; 
	padding: 85px 0 0 0;
	width: 100%;
	height: 85%;
	text-align: center;
	/*background-color: #ccc;
	position: relative;
	z-index: 1;*/
	}
	.content
	{
	height: 100%;
	}
	.content img
	{
	position: relative;
  	top: 0;
 	bottom: 0;
 	left: 0;
 	right: 0;
	/*margin: auto;*/
 	max-width: 100%;
	max-height: 100%;
	}
PAGE TOP