作者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/cn.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