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

我试过研究这个问题，并询问有人比我更习惯CSS样式，但我们找不到解决方案。这里是JS小提琴链接：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 这是设置“保证金左：36px”属性后到div显示在上面的代码。所以，这有点帮助，但这不完全是我想要的。我很好奇为什么应该能够提供帮助，因为后退和前进按钮（在屏幕中看到）具有很高的高度，以避免像上面的div那样向边缘发生任何事情。

来源

2015-04-23 Joshua Kemmerer

你jsfiddle没有显示任何图像，因为图像不是在线托管的，所以很难看出你的意思。一般来说，你可以通过在父元素上放置'overflow：hidden'来防止溢出，但我不确定你的情况最终结果应该是什么样子。你可以添加一个素描到你的文章？ – Blaise

我试图将图片更改为另一张图片在你的小提琴中，并与它混为一谈。得到它的工作我怎么想你想我与此代码的工作：

<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;的元素风格。

它可能不是最新的污染物，但它是我能找到的quicket。

来源

2015-04-23 13:03:25 Wirde

这有助于很多，但现在我仍然需要弄清楚如何像文件夹一样并排显示图像。我试图在该div中复制并粘贴相同的图像，但第二个图像显示在第一个图像下面。 –

我不是真的知道你的意思，但会'显示：内联块;'帮助？ Mabye你可以修改你的小提琴来显示你的新问题？另外，不要忘了upvote，如果它对你有帮助:) – Wirde

实际上，“显示器：内嵌块”似乎把第一个图像本身放在正确的位置，即使没有“位置：绝对”，所以这真的很有帮助。它不能解决我的下一张图片不能显示我想要的效果，但这回答了我原来的问题。谢谢！ –

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

回答

相关问题