przelewowy obraz na zewnątrz pojemnika na lewej stronie

Question

gołego ze mną tutaj, to jest trochę trudno właściwie wyjaśnić ...

Pierwsza część jak opisano poniżej działa poprawnie.
Na tym pierwszym obrazie wyświetlany jest ekran przeglądarki, który jest szerszy niż mój kontener (ładowanie początkowe). Niebieskie to całe okno ekranu, białe to kontener (z max-width) z podstawowymi 12 kolumnami z bootstrapu.
Chcę, aby laptop po prawej stronie był szerszy niż liczba x kolumn, które ma na swojej siatce początkowej. Gdy (na przykład) 7 kolumn ma szerokość (na przykład) 500 pikseli, a obraz ma szerokość 800 pikseli, to w sposób naturalny przepełni on kontener (jeśli obraz nie ma szerokości, oczywiście). Więc kiedy zmniejszysz okno (patrz drugi obraz), po prostu wycinasz obraz.

tej drugiej części, jak opisano poniżej JEST PROBLEM ...
Teraz chcę mieć to samo po lewej stronie ... ale kiedy mam 7 colums w moim bootstrap, które są (na przykład) o szerokości 500 pikseli i mam w nim obraz, o szerokości 800 pikseli przelew ponownie pojawia się naturalnie po prawej stronie. Chciałbym, żeby to było po lewej stronie !! Więc coś w rodzaju div z obrazem wewnątrz jest wyrównane w prawo, ale przepełnienie jest po lewej stronie.

TO JEST TO, CO JEST PONIEWAŻ SIĘ TERAZ: gdzie przelew jest po prawej stronie (kiedy powinien znajdować się po lewej stronie).

• nie chcę aby strech obraz dłużej niż naturalnej szerokości obrazu
• Wolę to istota <img> -tags w zastępstwie background-image, ale jeśli nie jest to możliwe tylko mogę Zaakceptuj to.

Niektóre Kod jest w tym JSFiddle

Answer 1

Używaj

.imgLeft{ 
    direction: rtl; 
} 

LUB

.imgLeft{ 
    position: relative; 
} 

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

Answer 2

Nadanie max szerokości obrazu do robót będzie

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