[問題] 如何讓DIV的高度自動剛好等於圖片的高度?

看板Web_Design作者 (沒事練雙音,練雙音沒事)時間11年前 (2014/10/19 20:02), 11年前編輯推噓7(7推 0噓 6→)
留言13則, 8人參與, 最新討論串1/1
大家好，想請教一個問題 http://imgur.com/ZWtohtB
如圖，我有一個DIV裡要放圖片 在我不設定DIV的寬高時，圖片下方會多一條空間出來 (紫色是設背景色方便觀看) 如此就會擠壓到排版。 我希望是如下圖 http://imgur.com/RRZJCYb
DIV的高度自動調整成圖片的高度。 圖中是設了DIV的寬高才達到的。 有沒有DIV不用設寬高，就可以自動達到目的的方法呢？ 懇請賜教，謝謝！ -- ※ 發信站: 批踢踢實業坊(ptt.cc), 來自: 124.10.2.40 ※ 文章網址: http://www.ptt.cc/bbs/Web_Design/M.1413720179.A.8AA.html
推
10/19 22:07, , 1F
注意padding margin 的設定，以及注意不要有<BR>之類的
10/19 22:07, 1F
推
10/19 22:20, , 2F
他的PIC PADDING 是0了 直接把範例上傳吧
10/19 22:20, 2F
推
10/19 22:34, , 3F
用js fiddle這種工具問比較有辦法幫忙
10/19 22:34, 3F
後來試了另一個方法也可以達成，就是改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
→
10/20 00:07, , 4F
其實 img {display:block;} 應該就可以了，不想動的原因是？
10/20 00:07, 4F
推
10/20 11:09, , 5F
10/20 11:09, 5F
→
10/20 11:10, , 6F
所有方法都試過了，只有m大方法可行，
10/20 11:10, 6F
→
10/20 11:11, , 7F
招喚高手，可否解釋一下謂何div底下會多一小段空白
10/20 11:11, 7F
推
10/20 11:36, , 8F
因為圖底部，是跟文字切齊的
10/20 11:36, 8F
推
10/20 21:18, , 9F
預設 vertical-align 是對齊 Baseline 的。下方的空白是
10/20 21:18, 9F
→
10/20 21:18, , 10F
Descender 的空間
10/20 21:18, 10F
→
10/20 21:24, , 11F
10/20 21:24, 11F
推
10/21 12:50, , 12F
請問這位溫拿，可以把您的情況說清楚點嗎?
10/21 12:50, 12F
→
10/21 12:50, , 13F
不要動img的css，也不要設定div高度您才接受嗎?
10/21 12:50, 13F
‣ 更多 kudoropu 的文章
文章代碼(AID): #1KGwXpYg (Web_Design)