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