コンテンツ幅より大きい画像を中央位置に配置する

メインビジュアルなどでたまにやるのですが、コンテンツ幅より幅の広い画像を中央配置にして、タブレットなどのコンテンツ幅で表示する場合には左右が切れた状態、幅の広いブラウザではコンテンツ幅より大きな状態で見せたいときの方法です。

サンプルコード

HTML

<div id="visual">
	<div id="visual-image"><img src="img.jpg" width="1600" height="500" alt="" /></div>
</div>

CSS

#visual {
	width: 100%;
	min-width: 960px;
	overflow: hidden;
}
#visual-image {
	position: relative;
	left: 50%; /* 画像の左端が画面中央にくる */
	margin-left: -800px; /* 画像幅1600pxの半分だけ左に移動する */
}

#visualで画面幅が画像幅より狭い場合にはみ出た部分を表示しないようにしています。
#visual-imageのleft: 50%;で画像の左端が画面中央にくるようにして、margin-left: -800px;で画像幅の半分だけ左に移動しています。
画像表示のデモページ