福州建网站-福州做网站公司
福州做网站电话:0591-83584081 点击在线即时聊天-福州建站 点击在线即时聊天-福州网站建设
新闻中心
行业新闻
INDUSTRY NEWS
企业动态
ENTERPRISES DYNAMIC
网络编程
INTERNET KNOWLEDGE
网站优化
SEO

 
在线客服咨询一:
在线客服咨询二:
在线技术咨询一:
在线技术咨询二:
24小时在线咨询:
在线咨询:0591-83584081
 最新行业资讯
苏宁研制自动送货机器人
京东便利店模式:并非直
疯狂的区块链,分裂的朋
双11有什么优惠,支付宝推
“马云的战略+马化腾的产
福州管道疏通推荐福州榕
共享单车还能走多远,二
公众号“意外艺术”获得
♦ 您现在的位置:亿联网络 >> 新闻中心 全方位电子商务策划 设计 营销 推广

网页图片宽度和高度自适应的方法
本文来源:网络  发表日期:2017-9-12 22:42:41  录入:www.yiliancn.com

在我们设计网页的时候,经常会遇到图片自适应问题,实际这些工作完全可以交给浏览器来完成就可以了,只可惜,无论是IE还是FIREFOX在图片自适应这个问题上都处理的不尽人意,网上实现网页图片宽度和高度的方法也很多,主要又两种:

第一种是使用CSS来完成;第二种是使用Javascript来完成,根据实际的应用效果来说,使用Javascript还是比较靠谱一点,因为CSS的expression的确有点烦,笔者是指使用效果上有点恼人,本文专门把这两种都总结一下,方便站长们参考使用。

一、使用CSS实现图片的自适应

使用CSS实现图片自适应很简单,主要靠两个参数来完成,分别是max-width和max-height,这两个参数在FIREFOX和IE7以 上支持都很好,但是在IE6上面,效果非常糟糕,尤其是对于多张图片的显示,第一次显示网页大都很难达到图片自适应的效果,一般都是有些能自适应,有些不 能自适应,多次刷新可能又显示OK,就是这点就足够烦人,而且一旦显示多张图片,IE 6上就卡的要命(expression在IE上比较占用资源,感觉设计是用来玩得,FIREFOX自适应效果还是比较好,速度也非常快),反正笔者至今是 没有找到更好的CSS方法来让IE 6完美支持图片自适应。示例代码如下:

复制代码
img{ max-width: 128px; max-height: 128px; height:auto; zoom:expression( function(e) {
if(e.width>e.height) {if (e.width>128) { e.height = e.height*(128 /e.width); e.width=128; }}
else {if (e.height>128) { e.width = e.width*(128 /e.height); e.height=128; }}
e.style.zoom = '1';     }(this));
         overflow:hidden; 
}
复制代码

面代码格式上需要特别注意两点:

1、zoom属性里宽高赋值不能带单位(如px),否则无效;

2、if和else语句也必须带大括号括起来,单句指令也不行(而在很多编程语言里,单句指令可以无需大括号);

二、使用Javascript实现的图片自适应

使用Javascript自适应相对来说比较方便,唯一的麻烦是就是在网页中需要对image预设置onload事件处理resize()函数,如 果对于动态网页来说还好一点,反正是动态的,程序里加上去就OK了,可是如果对于很多篇文章而言,在里头增加onload函数有点麻烦,除非一次性的写个 脚本批量处理,否则后期更改或替换起来还是比较麻烦,比如图片的可显示宽度变化等等。

另一方面如果把宽度值写在Javascript中,那么将带来程序的通用性降低,下面的示例不是写死的,已测试效果比起CSS要HAPPY的多,网 上也又很多类似的例子,不是不完成就是中间还存在某些问题,本文的例子应该会更好一点,笔者对不同的尺寸下的图片的显示效果做过好几种测试了。示例如下:

//RESIZE 图片自适应图片宽度和高度
//参数说明:
//        obj是图片对象,this调用方法见下面示例
//        maxW和maxH分别为约定的最大宽度和最大高度

 

复制代码
function resizeimg(obj,maxW,maxH)
{ var imgW=obj.width; var imgH=obj.height; if(imgW>maxW||imgH>maxH)
         { var ratioA=imgW/maxW; var ratioB=imgH/maxH; if(ratioA>ratioB)
                  {
                           imgW=maxW;
                           imgH=maxW*(imgH/imgW);  } else {
                           imgH=maxH;
                           imgW=maxH*(imgW/imgH);  }  
                  obj.width=imgW;
                  obj.height=imgH;
         }
}
复制代码

上例的使用示例:

<img src="http://www.example.com/logo.gif" onload="resizeimg(this,600,1024);"/>

我们在制定宽度和高度值的时候,一般宽度是肯定需要限定,而高度经常不需要限制,所以可以把高度指定的大一点,如果高度也限制,那么相当于制定一个image box,下面的程序或许对您很有用(不限制图片高度的忽略下面这个示例)。
当指定图片BOX的时候,一般都还需要在图片自适应之后显示在BOX容器的中间,也就是水平和垂直都需要居中。首先需要指定BOX容器的宽度和高度,然后可以使用CSS来控制显示效果,也可以使用Javascript控制显示效果。示例如下:
IMAGE BOX容器:

<div id="imgbox" style="width:800px;height:800px;border:1px solid #CCCCCC">
        <img src="..." onload="resizeimg(this,600,600)"/>
</div>

CSS显示方法如下:

#imgbox {text-align:center;vertical-align:middle;} #imgbox img {vertical-align:middle;}

或使用Javascript完成:
在上文resizeimg()函数里最后只需要增加类似这样的语句,

obj.style.margin-left=(800-imgW)/2;
obj.style.margin-top=(800-imgH)/2;

即可,当然了,您总不能让resize尺寸本来就超出BOX容器尺寸吧,否则图片就把容器撑大,style风格肯定就对不上了。

分享到:
 
网站备案/许可证号:闽ICP备06051533号-1
联系地址:福州市仓山区金山榕城广场8座201
联系电话:0591-83584081 联系QQ:1005609337
网站标签:福州网站建设 福州网络公司 福州小程序开发 福州网站SEO优化 福州APP开发
 
点击这里给我发消息