当前位置:首页 >> 网站专题 >> WEB2.0 >> 浏览文章

使用css让大图片不超过网页宽度

作者:admin 日期:2010年11月23日 来源:本站原创 浏览:

让大图片不超过网页宽度,让图片不撑破通过CSS样式设置的DIV宽度!

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

图片撑破布局原因
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滤镜的分类和使用格式介绍
下一篇文章:没有了

点金商务引擎是什么?
      点金商务引擎是由深圳点金信息技术有限公司推出的一款网络营销软件。它搜集了全球2000多个优秀的商贸网站,集中最丰富的商业信息。它将引导企业通过互联网宣传产品,寻找客户,让企业无须丰富的网络知识,轻松实现网络营销。
更多>>

相关导航:建站经验网站SEO优化WEB2.0搜索引擎flash技术网络编程虚拟主机域名网络安全服务器营销知识营销研究营销技巧营销策略营销新闻网站策划
Copyright(C) 2009-2010 石家庄辉煌园商贸有限公司 版权所有
公司网站  咨询热线: 0311-88708888 0311-88709888 0311-88709766 0311-88709840  公司网站
网址:www.huihuangyuan.org 电子邮件:86234885@163.com 监督电话:13700319526
客户网站  在线QQ:543130132 MSN:sjz139@hotmail.com 公司地址:石家庄市裕华区方兴路68号(二机厂北)  客户网站