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

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;添加到元素样式中。

它可能不是最好的结果，但它是我能找到的快速结果。