Переполнение изображение вне контейнера на левой стороне

Question

голой со мной здесь, это своего рода трудно объяснить правильно ...

ЭТО ЧАСТЬ ПЕРВАЯ, как описано ниже работает отлично.
На этом первом изображении вы видите экран браузера, который шире моего (загрузочного) контейнера. Синий - это весь экран, белый - это контейнер (с max-width) с базовыми 12 столбцами из бутстрапа.
Я хочу, чтобы ноутбук справа был шире, чем x-количество столбцов, которое оно имеет на своей загрузочной сетке. Когда (например) 7 колонок имеют ширину (например) 500 пикселей, а изображение имеет ширину 800 пикселей, оно, естественно, переполняет контейнер (если изображение не имеет ширины, конечно). Поэтому, когда вы уменьшаете окно (см. Второе изображение), вы просто немного сокращаете изображение.

Вторая часть, как описано ниже есть проблема ...
Теперь я хочу, чтобы иметь то же самое с левой стороны ... Но когда у меня 7 colums в моей начальной загрузке, которые (например) шириной 500 пикселей, и у меня есть изображение внутри, с шириной 800 пикселей переполнение происходит, естественно, с правой стороны. Я хотел бы, чтобы это было на левой стороне! Итак, что-то вроде того, что div с изображением внутри выравнивается вправо, но переполнение слева.

ЭТО ЧТО ПРОИСХОДИТ ПРАВО СЕЙЧАС: где переполнение находится справа (когда оно должно быть слева).

• Я не хочу, чтобы это изображение растяжения больше, чем естественная ширина изображения
• Я предпочитаю, будучи <img> -tags в смену background-image, но если это не возможно, я могу принимаем это.

Некоторые код содержится в этом JSFiddle

Answer 1

Используйте

.imgLeft{ 
    direction: rtl; 
} 

ИЛИ

.imgLeft{ 
    position: relative; 
} 

.imgLeft > img{ 
    position: absolute; 
    right: 0; 
} 

Answer 2

Giving макс-ширине изображения будет работает

.imgRight, .imgLeft img{ 
    max-width:100%; 
    }