Loveyuki's BLOG

一直以来有个很头疼的问题困扰着我,那就是图片缩放的问题,写到 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;padding3px;  
  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));

本日志由 Loveyuki 于 2008-03-25 16:28 发表,目前已经被浏览 1340 次,评论 15 次;

作者添加了以下标签: CSSFirefoxInternet Explorer自动缩放

此文章由 于 2008-03-25 16:50 编辑;

引用通告:http://www.loveyuki.com/Article/62/Trackback.ashx

评论订阅:http://www.loveyuki.com/Article/62/Feeds.ashx

文章评论

引用锐风 发表于 2008-03-26 09:42 #

沙发..好东西啊!

引用逍遥老鬼 发表于 2008-03-28 09:17 #

不错不错收藏了。

引用逍遥老鬼 发表于 2008-03-28 09:33 #

给你这里发引用发不过来,咋回事?我用的SAblog的,给别的发么有问题的。

引用Loveyuki 发表于 2008-03-28 09:40 #
2008-03-28 09:33 by 逍遥老鬼

给你这里发引用发不过来,咋回事?我用的SAblog的,给别的发么有问题的。

引用过滤的比较严格,呵呵。看来是要调整松一些的了!

引用txink 发表于 2008-03-28 13:16 #

是,这样好多了!

引用通告逍遥老鬼继续扯淡 发表于 2008-03-28 14:13 #
兼容IE,Firefox的图片自动缩放CSS代码
摘录:Loveyuki`blo...
引用Loveyuki 发表于 2008-03-28 14:19 #
2008-03-28 14:13 by 逍遥老鬼继续扯淡

兼容IE,Firefox的图片自动缩放CSS代码摘录:Loveyuki`blo...

汗……,你发送过来的 URL 好像不太对。不能直接跳到文章页面。

引用通告梓志通鉴 发表于 2008-03-28 17:29 #
兼容IE,Firefox的图片自动缩放CSS代码
转自:http://www.loveyuki.com...
引用汤尼尔 发表于 2008-03-28 21:39 #

surprise.gif好东西!学习了!

引用庶 发表于 2008-03-31 10:15 #

以前也用这个,现在用JS的,不过也是要在加载完图片后再缩放!

引用frank 发表于 2008-03-31 12:20 #

slaver.gif风格好漂亮噢。。。

能不能麻烦你发给我一份呀?谢谢啦~~

franklight@126.com

引用txink 发表于 2008-04-03 23:52 #

还是不怎么理想啊!变形太夸张了!

引用kk 发表于 2008-04-14 22:23 #

 

firefox也支持expression?

引用Loveyuki 发表于 2008-04-15 16:20 #
2008-04-14 22:23 by kk

firefox也支持expression?

expression 主要是因为 IE6 不支持 max-width,IE7 和 Firefox 等浏览器支持 max-width 的。

引用yanglei 发表于 2008-04-16 12:06 #

我在IE6里加载完了图片还是没缩放呀...咋回事?

(必填)
(必填,不会被公开)
你可以在 30 分钟内修改你所发表的评论

日历

  • 29
  • 30
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 1
  • 2

搜索

站点统计

版权所有©2007-2008, Loveyuki.com | 系统:Bitrac | 皮肤:HelloWiki | 图标:XiaoIcon | 空间域名:光辉互联,易联网络