百度空间 | 百度首页 
 
查看文章
  
兼容 IE,Firefox 的图片自动缩放 CSS(转）
2009-03-06 09:39

源地址：http://hi.baidu.com/hankx/blog/item/084d90451826c03a86947366.html

一直以来有个很头疼的问题困扰着我，那就是图片缩放的问题，写到 JS 里面吧，不太容易修改。写到 CSS 里面吧，IE 6 又不支持 max-width，今天用了很久时间终于解决了这个问题，基本完美了，唯一不完美的就是 IE 6 只有在图片完全下载完成后才会自动调整大小，不过聊胜于无，总比进入页面后看到长长的横向滚动条舒服的多，这里使用了 expression，但是利用了一次加载，所以 expression 不会造成内存泄漏。当然，如果你有更好的解决方案，希望能与我交流。代码如下：

  1. .Image {  
  2.     max-width:600px;height:auto;cursor:pointer;  
  3.     border:1px dashed #4E6973;padding: 3px;  
  4.      zoom:expression( function(elm) {  
  5.         if (elm.width>560) {  
  6.             var oldVW = elm.width; elm.width=560;  
  7.             elm.height = elm.height*(560 /oldVW);
  8.         }
  9.         elm.style.zoom = '1';
  10.     }(this));
  11. }

名称：zoom
分类：IE专有样式
简述：设置对象缩放
概述：zoom是设置对象缩放的样式(Style)。

  • zoom详细说明

  • 语法：

    zoom : normal | number

    取值：

    normal : 默认值。使用对象的实际尺寸
    number : 百分数 | 无符号浮点实数。浮点实数值为1.0或百分数为100%时相当于此属性的 normal 值

      说明：
      设置或检索对象的缩放比例。
      设置或更改一个已被呈递的对象的此属性值将导致环绕对象的内容重新流动。
      虽然此属性不可继承，但是它会影响对象的所有子对象( children )。这种影响很像 background 和 filter 属性导致的变化。
      此属性对于 currentStyle 对象而言是只读的。对于其他对象而言是可读写的。
      对应的脚本特性为 zoom 。
      div {zoom : 0.5; }
      .avist { zoom: 0.20 }

类别：html&css | 添加到搜藏 | 浏览() | 评论 (0)
 
最近读者：
 
网友评论：
发表评论：
姓　名：
网址或邮箱： (选填)
内　容：
验证码： 请点击后输入四位验证码，字母不区分大小写
      

     

©2009 Baidu