如何避免圖像溢出其容器？

Question

我曾嘗試研究此問題，並要求比我具有CSS樣式經驗更豐富的人，但我們找不到解決方案。 這是JS Fiddle鏈接： https : //jsfiddle.net/haha78sr/ 。

具有ID的圖片，

ctl00_cphBody_btnFile或btnFile

正在溢出主體，我希望它漂浮在主體的下方 ，即文件夾轉發器的下方 （即使文件夾並不總是充滿一行）。 它還應與其上方的其他項目（文件夾項目）水平對齊。

<div class="" style="padding: 10px; width: 150px; height: 150px;">
<asp:ImageButton ID="btnFile" runat="server" ImageUrl="~/images/joshTest/cat1.png"
                Style="border-width: 0px; width: 150px; height: 150px;"/>

編輯：這是給我的圖像： http : //imgur.com/aO0Tl8x這是在將屬性“ margin-left：36px”設置為上面代碼中顯示的div之后的。 因此，這會有所幫助，但這並不是我想要的。 我很好奇為什么這應該能有所幫助，因為后退和前進按鈕（在屏幕上看到）具有很大的高度，可以避免任何東西像上面的div那樣朝向邊緣。

Answer 1

我試圖將圖片換成小提琴中的另一張圖片，並弄亂了。 得到了它的工作方式，我認為您希望我使用以下代碼：

<input id="ctl00_cphBody_btnFile" type="image" style="border-width: 0px; width: 150px; height: 150px; position: absolute;" src="http://www.google.com/doodle4google/images/d4g_logo_global.jpg" name="ctl00$cphBody$btnFile">

我所做的就是增加position:absolute; 元素樣式。

這可能不是最整潔的解決方案，但我可以找到它。