
固定サイズのイメージを横スクロールバーが出ないよう100%配置
2013年1月30日CSSテクニック
ウィンドウサイズを小さくしても、横スクロールバーが出ないようにするimgの設置法です。
HTML
<div id="visual"> <p><img src="img.png" width="2000" height="500" /></p> </div>
CSS
#visual { width: 100%; height: 500px; overflow: hidden; margin: 0 auto; position: relative; z-index: 0; } #visual p { overflow: hidden; top: 0; left: 50%; width: 2000px; height: 500px; margin-left: -1000px; position: absolute; } #visual img { display: block; position: absolute; top: 0; left: 0; width: 2000px; height: 500px; }