Пусть опоздал с ответом, но вот вариант с jQuery (jsFiddle):
css
#header{
border: 1px solid #f00;
padding: 10px 0;
text-align: center;
}
#content {
border: 1px solid #000;
}
#header, #content {
margin: 0 auto;
width: 800px;
}
#tricky-image {
overflow: hidden;
}
html
<div id="header">Блоки шириной 300 пикселей<br>Картинка шириной 450 пикселей</div>
<div id="content">
<p>Не следует, однако забывать, что новая модель организационной деятельности позволяет выполнять важные задания по разработке новых предложений.</p>
<div id="tricky-image"><img src="http://placehold.it/1400x400" alt="" /></div>
<p>С другой стороны консультация с широким активом влечет за собой процесс внедрения и модернизации соответствующий условий активизации.</p>
</div>
javascript
var max_width = 800, //ширина контента
image_width = 1400, //ширина картинки
resize_timer = null,
resize_timout = 10;
$(document).ready(function(){
changePosition();
});
$(window).bind('resize', function() {
if(resize_timer) {
clearTimeout(resize_timer);
}
resize_timer = setTimeout(changePosition(), resize_timout);
});
function changePosition(){
var window_width = $(window).width(),
holder = $('#tricky-image'),
img = $('#tricky-image > img:first-child'),
holder_margin_left = Math.ceil((window_width - max_width) / 2),
img_margin_left = Math.ceil((image_width - window_width) / 2);
console.log(window_width);
if (window_width < image_width) {
holder
.width(window_width)
.css({"margin-left": "-" + holder_margin_left + "px"});
img.css({"margin-left": "-" + img_margin_left + "px"});
}
}