关于img父容器的高度会比img的高度多几像素的问题?
男神
男神 2017-03-24 09:18:13
0
2
1382
<div class="thumb" style="width: 500px;">
  <img src="imgs/1.jpg" style="width: 100%;height: auto"/>
</div>

在网页上thumb的高度会比里面的img高度多出几像素,请教下这是为啥?

男神
男神

╰つ ゛思 绪 万 千 , 不 如 努 力 向 前 .ヽ

Antworte allen(2)
数据分析师

关于img父容器的高度会比img的高度多几像素的问题?-PHP中文网问答-关于img父容器的高度会比img的高度多几像素的问题?-PHP中文网问答

围观一下哦,学习一下。

迷茫

这是因为浏览器本身对img标签的渲染问题,img标签本身是行内元素(主要原因)所以有一种简单有效的解决办法(推荐)

img {    display:block;}

或者可以尝试为父级div设置font-size:0(不推荐)
也可以采用浮动(float),原因是浮动会将这个元素转换为块级元素
当然还有为div定高并且设置overflow:hidden的解决办法(太不优雅了,强烈不推荐)

Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage