免费邮箱 |加入收藏 | 会员中心 | 我要投稿 | RSS
您当前的位置:首页 > 网页制作 > DIV+CSS

DIV CSS图片_CSS img

时间:2011-05-16 11:14:14  来源:  作者:潘春会

图片_DIV CSS图片_CSS img

 

这里为大家介绍的是DIV CSS对img图片控制。
我们常常会遇到以下情况:
1、img图片多了边框,特别是链接后的图片带边框
2、图片超出撑破DIV

下面我们通过CSS来解决这2个问题。
1、img图片多了边框,特别是链接后的图片带边框
 

解决去掉图片的边框
有边框的图片

根据以上图,我们对图片加链接,结果图片出现了边框,

解决方法:

我们只需在初始化IMG标签CSS即可

img{ padding:0; border:0;} 加入此CSS即可消除边框

提供CSS去掉图片边框后效果图
CSS去掉图片边框效果

2、图片超出撑破DIV
我们常常会遇到由于一个图片过宽过大,撑破了我们设置的宽度。
解决办法
使用CSS控制改对象IMG标签宽度即可,假如该对象为.yangshi设置宽度为500px,那我们就只需设置.yangshi img{max-width:500px;}但是在IE6中max-width是失效的,那我们最好解决办法,在上传图片的时候更加设置宽度,让图片本身宽度小于该地方设置宽度即可,这样感觉很麻烦,但是很多大的网站都是这样解决,一可以避免撑破设置宽度,二可以降低图片大小让浏览器更快打开网页。

总结:
1、一个网页中难免有图片,这时我们需要初始化img标签即:img{ padding:0; border:0;}
2、避免图片过宽撑破网页,我们建议在上传图片时候将图片剪切来比设置宽度小,同时还可以对该对象加入overflow:hidden属性,即隐藏超出内容包括图片。

CSS扩展解决知识
CSS解决图片撑破网页
CSS隐藏超出内容方法

 
来顶一下
返回首页
返回首页
发表评论 共有条评论
用户名: 密码:
验证码: 匿名发表
推荐资讯
国内常用的DNS列表
国内常用的DNS列表
Linux邮件服务器软件比较
Linux邮件服务器软件比
学用纯CSS打造可折叠树状菜单
学用纯CSS打造可折叠树
主流列式数据库评测之Infobright
主流列式数据库评测之
相关文章
栏目更新
栏目热门