用户名 密码 记住我 还未注册?

使用css让大图片不超过网页宽度 [技术论坛 - 主题制作]

XOOPS China 讨论区 > XOOPS Theme (主题) > 主题制作 > 使用css让大图片不超过网页宽度

正在浏览:   1 名游客



 到底部   前一个主题   下一个主题  [无发表权] 请登录或者注册



使用css让大图片不超过网页宽度
资深会员
注册日期:
2007/3/16 22:40
所属群组:
注册会员
帖子: 271
等级: 15; EXP: 40
HP: 0 / 360
MP: 90 / 3911
离线
让大图片不超过网页宽度,让图片不撑破通过CSS 样式设置的DIV宽度!

接下来,我们来介绍下网站在开发DIV+CSS的时候会遇到一个问题,在发布一个大图片的时候因为图片过宽会撑破自己设置的div宽度的问题。 copyright www.divcss5.com divcss5

图片撑破布局原因
1、由于浏览器版本低(微软IE6)
2、没有设置div布局的宽度

解决图片超出宽度或撑破div css布局方法
1、在文章中发布图片的时候将图片编辑缩小
2、通过对对应div的css来设置显示的图片最宽宽度 推荐
3、通过css对图片设定宽度。

通过css来解决图片撑破div布局案例
通过css来控制代码如下(cmcss是对应父级类名):
.cmcss {margin: auto;width: 600px;}
.cmcss img{max-width: 100% !important; height: auto!important; width:expression(this.width > 600 ? "600px" : this.width)!important;}这种图片第一次加载时候图片不能显示

直接通过对对应的div内的内容图片宽度设置代码如下:
.cmcss img{ width:500px;} 宽度自定,但是不推荐此方法,因为设置后此div布局内的图片将全部宽度为500px,那样将造成图片小的,被放大显示模糊。

可以通过对图片设置最宽css可以使用max-width来设置,但是IE6不支持,但是可以使用浏览器的css hack来设置代码如下
.cmcss img{max-width:500px;_width:500px;}
说明:通过其他浏览器不支持带“_”的css,但是IE6支持。刚好可以通过此css hack来实现对图片宽度的现在。这里只能克服IE6显示固定的宽度来符合其它版本的兼容性。

扩展与提高
我们看区别不同浏览器CSS HACK的代码
区别FF,IE7,IE6:
background:orange;*background:green !important;*background:blue;
你可能要问了,为什么不用“*”来代替“_”来区别IE6浏览器,这里值得注意的是ie6和IE7都会解释和识别“*”的,但是IE7对 important的识别具有优先全,所以IE7在CSS代码中有important将有优先识别并成为唯一性,所以在有important时候IE7和 IE6前面都可以用“*”号,但是无论带important在前或在后IE7将识别为唯一区别css hack。所以这里没有important的时候需要用另外IE6的css hack中“_”小写半角下划线。

8/15 20:03
_________________
中国钢铁营销网-致力于XOOPS行业网站应用与探索
XOOPS Theme设计宝典

工具箱 短消息 Email PDF 书签 打印 举报 回顶部


回复: 使用css让大图片不超过网页宽度
初级会员
注册日期:
2009/6/4 15:05
来自 北京
所属群组:
注册会员
帖子: 24
等级: 3; EXP: 62
HP: 0 / 65
MP: 8 / 287
离线
好!

9/4 15:44
工具箱 短消息 Email PDF 书签 打印 举报 回顶部


回复: 使用css让大图片不超过网页宽度
资深会员
注册日期:
2008/9/11 10:48
所属群组:
注册会员
帖子: 158
等级: 11; EXP: 62
HP: 0 / 265
MP: 52 / 1728
离线
谢谢分享,用到过这个技术。

9/6 16:44
工具箱 短消息 Email PDF 书签 打印 举报 回顶部



  [无发表权] 请登录或者注册


可以查看帖子。
不可发帖。
不可回复。
不可编辑自己的帖子。
不可删除自己的帖子。
不可发起投票调查。
不可在投票调查中投票。
不可上传附件。
不可不经审核直接发帖。
不可使用主题类别。
不可使用HTML语法。
不可使用签名档。

[高级搜索]