画像サイズを画面に合わせて伸縮させる
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%;
}