JSFiddle - React, Tailwind, and code Playground

HTML

<div id="header">Блоки шириной 800 пикселей
    <br>Картинка шириной 1400 пикселей</div>
<div id="content">
    <p>Не следует, однако забывать, что новая модель организационной деятельности позволяет выполнять важные задания по разработке новых предложений.</p>
    <div id="tricky-image">
        <img src="http://placehold.it/1400x400" alt="" />
    </div>
    <p>С другой стороны консультация с широким активом влечет за собой процесс внедрения и модернизации соответствующий условий активизации.</p>
</div>

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;
}

JavaScript

var max_width = 800, //ширина контента
    img_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((img_width - window_width) / 2);
    console.log(window_width);
    if (window_width < img_width) {
        holder.width(window_width)
            .css({
            "margin-left": "-" + holder_margin_left + "px"
        });
        img.css({
            "margin-left": "-" + img_margin_left + "px"
        });
    }
}