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

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

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

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

HTML

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

CSS

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

<div class="highlighter-rouge">
<pre class="highlight"><code>/* 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; }