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

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; 元素样式。

这可能不是最整洁的解决方案，但我可以找到它。