css控制设置图片不超过网页宽度

2019-09-07 郑州网站建设  

让大图片不超越网页宽度,让图片不撑破经由过程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 HACK的代码
区别FF,IE7,IE6:
background:orange;*bac公斤round:green !important;*background:blue;
你笼统要问了,为甚么毋庸“*”来代替“_”来区分IE6阅读器,这里值得留意的是ie6与IE7都邑正文与辨认“*”的,然则IE7对important的辨认具有优先全,以是IE7在CSS代码中有important将有优先识别并成为独一性,所以在有important时刻IE7和IE6后头都可以用“*”号,然而岂论带important在前或在后IE7将辨认为唯一区别css hack。所以这里没有important的时辰须要用别的IE6的css hack中“_”小写半角下划线。

案例下列(Blue hills.jpg图片为800像素宽的图片)
代码:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" ""> <html xmlns=""> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>css5.com.cn案例-图片不超越设置宽度</title> <style type="text/css"> <!--

.cmcss img{ max-width:150px;_width:150px;} --> </style> </head>

<body> 原始图片宽度为800PX,配置后下列图为150px <div class="cmcss"><img src=http://www.divcss5.com/css-jiaocheng/"Blue hills.jpg" /></div> </body> </html>


河南郑州做网站首选天择文化,我们专注郑州网站建设网站设计网站制作与开发,是中原地区专业的郑州网络公司,多年来我们一直努力,服务客户数百家,欢迎您的咨询。
本文链接:郑州网络公司http://tzchb.ieyo.com/dede/1057.html转载请标明出处,谢谢合作!
标签:
  • 设置
  • 图片
  • 宽度
  • css
  • 网页
  • 控制
  • 不超过