immagine Overflow di fuori del contenitore sul lato sinistro

Question

nudo con me qui, questo è un pò difficile da spiegare correttamente ...

questa prima parte come descritto di seguito sta lavorando bene.
In questa prima immagine viene visualizzata una schermata del browser più ampia del mio contenitore (bootstrap). Il blu è l'intera finestra dello schermo, il bianco è il contenitore (con un max-width) con le 12 colonne di base del bootstrap.
Desidero che il laptop sulla destra sia più largo del numero x di colonne che ha sulla griglia di bootstrap. Quando il (per esempio) 7 colonne ha una larghezza di (ad esempio) 500 px e l'immagine è larga 800 px, sarà naturalmente traboccare il contenitore (se l'immagine non viene data una larghezza, naturalmente). Quindi, quando riduci la finestra (vedi la seconda immagine) devi solo ritagliare un po 'l'immagine.

questa seconda parte come descritto di seguito è il problema ...
Ora voglio avere la stessa cosa sul lato sinistro ... Ma quando ho 7 colonne nel mio bootstrap, che sono (per esempio) 500px wide, e ho un'immagine al suo interno che, con una larghezza di 800px, l'overflow avviene naturalmente di nuovo sul lato destro. Mi piacerebbe che fosse sul lato sinistro !! Quindi qualcosa come avere un div con un'immagine all'interno è allineato a destra, ma l'overflow è a sinistra.

QUESTO È CHE COSA STA ACCADENDO ORA: dove l'overflow è a destra (quando dovrebbe essere a sinistra).

• Non voglio a strech questa immagine più lungo della larghezza naturale dell'immagine
• lo preferisco essere <img> -tag in vece di background-image, ma se questo non è possibile che ci riesco accettarlo.

Alcuni codice viene fornito in questo JSFiddle

Answer 1

Usa

.imgLeft{ 
    direction: rtl; 
} 

O

.imgLeft{ 
    position: relative; 
} 

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

Answer 2

Dare max-width per l'immagine sarà lavora

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