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

我試過研究這個問題，並詢問有人比我更習慣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

實際上，「顯示器：內嵌塊」似乎把第一個圖像本身放在正確的位置，即使沒有「位置：絕對」，所以這真的很有幫助。它不能解決我的下一張圖片不能顯示我想要的效果，但這回答了我原來的問題。謝謝！ –

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

回答

相關問題