溢出圖像左側

裸陪我在這裏，這是有點難以正確解釋...溢出圖像左側

第一部分所描述的下面是工作的罰款。
在第一張圖片上，您會看到比我的（自舉）容器更寬的瀏覽器屏幕。藍色是整個屏幕窗口，白色是容器（帶有max-width），帶有自舉的基本12列。
我希望右側的筆記本電腦的寬度大於其自舉網格上的列數。當（例如）7個柱子的寬度（例如）500px，圖像寬度爲800px時，它自然會溢出容器（如果圖像沒有給出寬度，當然）。所以當你縮小你的窗口時（參見第二張圖片），你只需剪下一點圖片。

這第二部分，如下所述的問題是...
現在我想有左側同樣的事情......但是當我在我的引導7個colums，是（例如）寬度爲500px，並且我在裏面有一個圖像，寬度爲800px，溢出自然發生在右側。我想這是在左側！因此，像內部有一個圖像的div對齊到右側，但溢出位於左側。

這是什麼現在正在發生：溢出在右邊（當它應該在左邊）。

我不想STRETCH時這一形象長於圖像
我喜歡它是在background-image代替<img>標籤都有效的自然寬，但如果這是不可能的，我可以接受。

一些代碼在這個JSFiddle

來源

2016-06-22 nclsvh

使用

.imgLeft{ 
    direction: rtl; 
}

.imgLeft{ 
    position: relative; 
} 

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

來源

2016-06-22 08:44:45

是的！這工作，很簡單，但太驚人了！謝謝 – nclsvh

給予最大寬度提供的圖像會工作

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

來源

2016-06-22 08:38:40

沒有爲我工作，解決方案被標記爲答案fyi – nclsvh

溢出圖像左側

回答

相關問題