作者kudoropu (沒事練雙音,練雙音沒事)
看板Web_Design
標題[問題] 如何讓DIV的高度自動剛好等於圖片的高度?
時間Sun Oct 19 20:02:56 2014
大家好，想請教一個問題
http://imgur.com/ZWtohtB
如圖，我有一個DIV裡要放圖片
在我不設定DIV的寬高時，圖片下方會多一條空間出來
(紫色是設背景色方便觀看)
如此就會擠壓到排版。
我希望是如下圖
http://imgur.com/RRZJCYb
DIV的高度自動調整成圖片的高度。
圖中是設了DIV的寬高才達到的。
有沒有DIV不用設寬高，就可以自動達到目的的方法呢？
懇請賜教，謝謝！
--
※ 發信站: 批踢踢實業坊(ptt.cc), 來自: 124.10.2.40
※ 文章網址: http://webptt.com/m.aspx?n=bbs/Web_Design/M.1413720179.A.8AA.html
1F：推 LaPass: 注意padding margin 的設定，以及注意不要有<BR>之類的 10/19 22:07
2F：推 GoalBased: 他的PIC PADDING 是0了 直接把範例上傳吧 10/19 22:20
3F：推 matrixki: 用js fiddle這種工具問比較有辦法幫忙 10/19 22:34
後來試了另一個方法也可以達成，就是改img的vertical-align，如下圖
http://imgur.com/tHMIxGn
但如果可以我實在不想去動到img的style...
不曉得還有無其他方法？
上傳檔案供大大們看看（雖然實在是很簡單的一個檔案）
http://www.filedropper.com/test2_7
（圖片就請隨意替換了）
不大曉得JSFIDDLE要怎麼用...
※ 編輯: kudoropu (124.10.2.40), 10/19/2014 23:46:22
4F：→ miau: 其實 img {display:block;} 應該就可以了，不想動的原因是？ 10/20 00:07
6F：→ pttnews: 所有方法都試過了，只有m大方法可行， 10/20 11:10
7F：→ pttnews: 招喚高手，可否解釋一下謂何div底下會多一小段空白 10/20 11:11
8F：推 mmis1000: 因為圖底部，是跟文字切齊的 10/20 11:36
9F：推 eight0: 預設 vertical-align 是對齊 Baseline 的。下方的空白是 10/20 21:18
10F：→ eight0: Descender 的空間 10/20 21:18
12F：推 BigLoser: 請問這位溫拿，可以把您的情況說清楚點嗎? 10/21 12:50
13F：→ BigLoser: 不要動img的css，也不要設定div高度您才接受嗎? 10/21 12:50