NAKAZI LAB.(ナカジラボ)

Webサイト制作を円滑にすることを目的とした、cssやJavaScript(jQuery)の小技備忘録サイトです。

固定サイズのイメージを横スクロールバーが出ないよう100%配置

2013年1月30日CSSテクニック

固定サイズのイメージを横スクロールバーが出ないよう100%配置

ウィンドウサイズを小さくしても、横スクロールバーが出ないようにする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;
}

デモページ

  • ̃Gg[͂ĂȃubN}[Nɒlj

関連記事

  1. 固定サイズのイメージを横スクロールバーが出ないよう100%配置

更新情報をチェックする

rss feedly twitter facebook

今週の人気記事TOP10

サイト内検索

中の人

nakazi

Web関係のお仕事をしてます。効率化が大好きです。当サイトの更新情報やWeb制作に関する事を@nakazilabでつぶやいています。

連絡先

nakazilab[atmark]gmail.com