吾爱破解 - LCG - LSG |安卓破解|病毒分析|www.52pojie.cn

 找回密码
 注册[Register]

QQ登录

只需一步,快速开始

查看: 7704|回复: 22
收起左侧

[其他转载] 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]

本版积分规则 警告:本版块禁止灌水或回复与主题无关内容,违者重罚!

快速回复 收藏帖子 返回列表 搜索

RSS订阅|小黑屋|处罚记录|联系我们|吾爱破解 - LCG - LSG ( 京ICP备16042023号 | 京公网安备 11010502030087号 )

GMT+8, 2024-3-29 15:10

Powered by Discuz!

Copyright © 2001-2020, Tencent Cloud.

快速回复 返回顶部 返回列表