您现在的位置: 圆点视线 >> 教程 >> 网页设计 >> CSS样式表 >> 文章正文
[图文]IE6模拟max-width对图片动态缩放           ★★★
IE6模拟max-width对图片动态缩放
作者:网页教学…  文章来源:网页教学网  点击数:  更新时间:2007-10-24 18:11:50 
 页面功能:【发表评论】【加入收藏】【告诉好友】【打印此文】【关闭窗口 【字体:
  在web2.0的站中用户互动性是很强的,例如用户留言我们可能放开img标签,允许用户外链其他站点的图片,那么我们就需要解决图片尺寸过大所带来的页面布局问题。在支持max-width属性的浏览器中,这个很容易实现,我们只需要给特定的img定义全局的样式,不定义高宽,通过限定max-width就可以保证版面不受外链大图的干扰了。遗憾的是IE6不支持这个属性,很多时候我们采用overflow的hidden来保证我们的版面不受干扰,但这个解决方式并不是十分完美,没有兼顾图片的比例问题,对用户的参与积极性有一定的影响。这里介绍我的另外一种实现方式,用JS来动态缩放图片。

 核心的JS代码如下:
function resizeImage(img,width){
var image=new Image();
image.src=img.src;
var temp = image.width;
//var rate = image.width/image.height;
img.width = temp = (temp>width)?width:temp;
//img.height = Math.round(temp/rate);
img.style.display = "inline";
}

function doResize(){
if($.browser.version==6&&$.browser.msie) $("img").each(function(){resizeImage(this,100)});
}

window.onload = doResize;

  实现的原理很简单,主要是resizeImage函数通过判断,然后修改了img.width属性。然后就是考虑效率优化上的一些问题了,曾经看到有人直接在img标签的onload属性里调用动态修改尺寸的做法,这显然是极大消耗的,不可取;利用CSS中的行为-expression也存在争议,可能造成浏览器死掉,我个人很少用这个方法。

  这里我引用了Jquery框架,当然你可以使用其他类库或者自己来的库。目的就是在DOM元素返回以后统一进行函数处理。在此之前我对浏览器做了判断,当浏览器是ie6时才执行缩放操作,对于支持max-width属性的浏览器,我用CSS来完成对图片的限定。

  考虑到外链图可能很大,如果网速慢的时候我们的脚本把图片读入到内存也需要时间,因此我在页面加载时用CSS将图片先隐藏了,当缩放完成的时候再用JS将图片显示,所以这个CSS里用hack手段来针对ie6做隐藏处理了。
img{
display:inline !important;
display:none;
max-width:180px;
}


  还有一个小的优化就是尽可能不要定义图片的高宽,从我的示例中你可以看出,如果不定义高宽,那么JS只需要修改宽度,那么高度会自适应,如果定义了,那么JS需要对高宽都做等比缩放才能达到我们要的效果,这里额外增添了JS的消耗。对于用户输入带进来的高宽,那么服务端完全有能力把这个属性给过滤掉。能不定义高度,最好不要定义,能用CSS实现的就不要用JS实现,尽可能降低JS造成的消耗。
 【发表评论】【加入收藏】【告诉好友】【打印此文】【关闭窗口】 文章录入:Rainsion    责任编辑:Rainsion  【字体:
 
  • 上一篇文章:

  •  
  • 下一篇文章:
  • 最新文章
    相关文章
    XHTML+CSS的目的和好处(WEB标准的目的和好处
    常见的CSS问题的“一站式”的解决方案
    国外译文:网页设计如何使用CSS的选择器模式
    CSS实现图片阴影效果三部曲(译文)
    CSS实现不定高度DIV绝对居中
    25条CSS制作网页编写的提醒及小技巧整理
    Opera 中的 CSS 妙用 ── Flash block
    什么是用户定义的样式表?
    制作网页时手写CSS应该注意的一点技巧
    网页中用于构造图表的一些基本CSS代码
    网友评论:(只显示最新10条。评论内容只代表网友观点,与本站立场无关!)
    发表评论:
     姓  名: 评 分: 1分 2分 3分 4分 5分
     评论内容: ·严禁发表危害国家安全、政治、黄色淫秽等内容的评论。
    ·用户需对自己在使用本网服务过程中的行为承担法律责任
    ·本站管理员有权保留或删除评论内容。
    ·评论内容只代表机友个人观点,与本网站立场无关。
     
    最 新 推 荐
     
    百度主题推广
    最 新 热 门