html中图片下面有空白（3px左右）原因及解决方案

21K韶华 · 发表于 2016-11-22 16:05

我们在页面中写样式的时候有时候会遇到这样的情况：

原因：img是一种类似text的元素，在结束的时候，会在末尾加上一个空白符，所以就会多出3px。

解决方案：img{ display:block;}

或者img{ vertical-align: top;}

注：vertical-align: top;把元素的顶端与行中最高元素的顶端对齐；

我好气呀 · 发表于 2016-11-22 17:52

本帖最后由 l95914 于 2016-11-22 17:54 编辑

我爱佳丽发表于 2016-11-22 17:03
楼主图片宽高比例和图片父级的宽高比例不一样怎么能做到图片宽高与其父级的宽高一样大小而且图片不 ...

图片宽高都设置100%；
举例如下，代码可复制运行：

[HTML] 纯文本查看 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
        <meta charset="UTF-8">
        <title>Document</title>
        <style>
                * {
                        margin:0;
                        padding: 0;
                }
                .photo {
                        width: 1200px;
                        height: 700px;
                        margin:0 auto;
                }
                img {
                        width: 100%;
                        height: 100%;
                }
        </style>
</head>
<body>
        <div class="photo">
                <img src="http://image60.360doc.com/DownloadImg/2013/04/1613/31674132_21.jpg" alt="">
        </div>
</body>
</html>

我爱佳丽 · 发表于 2016-11-23 13:36

本帖最后由我爱佳丽于 2016-11-23 13:39 编辑

l95914 发表于 2016-11-23 13:11
如果图片本身高度没有盒子高，你设置它有什么意义？？以你的设定来看，我无言。

就是盒子和图片的比例、大小相差很大时然后使图片填满盒子并且图片不能被拉伸和变形纯CSS有没有解决办法

QQ图片20161123133114.png

类似这种图片尺寸很大（很长的图也可能是很宽的图）或者尺寸很小（图片填满盒子居中显示不变形）保证图片不变形的情况下居中显示这种纯CSS能解决吗（这个我是用JS 控制的）

简单的幸福CG · 发表于 2016-11-22 16:14

虽然用不到不过还是感谢楼主分享的

bbsxiaoxi · 发表于 2016-11-22 16:15

提示: 作者被禁止或删除内容自动屏蔽

一生挚爱 · 发表于 2016-11-22 16:19

谢谢楼主分享前端一些小的细节

斌道天下 · 发表于 2016-11-22 16:28

谢谢分享吧，楼主精神值得鼓励。
以后建议写页面时候每个头部css直接注明
*{
padding：0；
margin：0；
border：0；
}
a {
text-decoration:none；
}
img{
display：block；
}
chearfix{
chear:both;
}

TMF4CK · 发表于 2016-11-22 16:31

十分赞成！！！

aaa288794 · 发表于 2016-11-22 16:34

来学习的,

qq18350 · 发表于 2016-11-22 16:35

这就看楼主用的哪个重置CSS文件了，我用的是自己写的，就已经对image初始化了，并不会出现那种问题，但还是感谢你的精神

QNLY · 发表于 2016-11-22 16:51

学习一下

回眸-instant · 发表于 2016-11-22 16:53

感谢楼主分享

帐号		自动登录	找回密码
密码			注册[Register]

bbsxiaoxi bbsxiaoxi 当前离线好友阅读权限 0 听众最后登录 1970-1-1 头像被屏蔽	bbsxiaoxi 发表于 2016-11-22 16:15 提示: 作者被禁止或删除内容自动屏蔽
	如何快速判断一个文件是否为病毒！
	回复支持举报

[其他转载] html中图片下面有空白（3px左右）原因及解决方案

本帖被以下淘专辑推荐: