コンテンツの幅が960pxで、ビジュアル画像が1280pxあるけど、横スクロールは出したくない、っていうときの対応方法です。

普段なんとなく慣れで作ってしまっているのですが、正攻法を調べようとしたところ、ググっても出て来なかった（多分キーワードが良くない）ので、サンプルを作っておきました。

※IE6は横スクロールでます。

追記（2013/3/29 12:36）
コンテンツエリアよりウィンドウを狭くして横スクロールバーが出た場合、横スクロールすると画像が途切れてしまう問題に対応しました。

HTML

<div id="visual">
<div class="image-wrap"><img src="http://placekitten.com/g/1280/300" width="1280" height="300" alt=""></div>
</div>

CSS

#visual {
	/* 表示エリアを100%にする */
	/* コンテンツエリアより狭くしない ※追記 */
	/* 内包要素が100%を超えたら隠す */
	width: 100%;
	min-width: 960px;
	overflow: hidden;
}
#visual .image-wrap {
	/* コンテンツエリアと同じ幅 */
	/* 中央寄せ */
	width: 960px;
	margin: 0 auto;

	/* IE6対応 */
	_position: relative;
	_height: 300px;
	_z-index: 1;
}
#visual .image-wrap img {
	/* line-heightを無くす */
	/* コンテンツエリアからはみ出た幅をネガティブマージンでズラす */
	display: block;
	margin: 0 -160px;

	/* IE6対応 */
	_position: absolute;
	_z-index: 1;
}

body に overflow:hidden を指定して、後々面倒臭くなったような記憶があるので、div 1つ増やして対応しています。

ネガティブマージンはleftだけでもいい気もしますが、ちゃんとチェック出来ていないので両側に入れています。

ツッコミなどありましたら、コメントまたはツイッターでお願いします。