龙盟编程博客 | 无障碍搜索 | 云盘搜索神器
快速搜索
主页 > web编程 > Javascript编程 >

兼容ie、firefox的图片自动缩放方法

时间:2012-12-29 08:41来源:未知 作者:admin 点击: 次
分享到：
本文章介绍了利用max-width,max-height使图片等比例自动缩放，由于max-width,max-height在ie6下不被支持我们还可以利用javascript来操作。 1、利用max-width,max-height使图片等比例自动缩放，代码： 代
本文章介绍了利用max-width,max-height使图片等比例自动缩放，由于max-width,max-height在ie6下不被支持我们还可以利用javascript来操作。

1、利用max-width,max-height使图片等比例自动缩放，代码：

 代码如下

img{

　　max-width: 330px;

　　max-height: 150px;

}

 

由于ie6不支持css max-width,max-height,所以在ie6中需要利用javascript脚本来控制大小。

 2、用javascript脚本来兼容ie6，代码如：

 代码如下
var img_width = img.OffsetWidth;var img_height = OffsetHeight;
var current_w = (150*img_width)/img_height;
var current_h = (330*img_height)/img_width;
if(img_height>150){
    if(img_width>330){
        D.css(img,{
            width:330 + "px",
            height:current_h + "px"
        })   
    }else{
        D.css(img,{
            width:current_w + "px",
            height:150 + "px"
        })
    }
}else{
    if(img_width>330){
        D.css(img,{
            width:330 + "px",
            height:current_h + "px"
        })
    }else{
        D.css(img,{
            width:img_width + "px",
            height:img_height + "px"
        })
    }
}
 

【注1：D.css为KISSY.DOM.css，引用的是kissy类库中的DOM方法】

【注2：用javascript来控制图片的尺寸页面必须要等图片完全加载出来，所以代码要包含在window.onload事件中，如果图片加载速度很慢的话，可能会有一个小缺陷】


精彩图集
node+express+ejs制作简单页面上手指南_node.js
node+express+
js点亮星星评分并获取参数的js代码
js点亮星星评
鼠标滑过出现预览的大图提示效果
鼠标滑过出
查找Oracle高消耗语句的方法
查找Oracle高
PHP开发者必须掌握的6个关键字
PHP开发者必

热门标签

php分页代码 JS定义二维数组 类级属性 底部菜单 YII2 表格结构 数据库同步 验证插件 中国天气网 nls 下拉式菜单 poll 数据变 widget开发 后台获取 FTP自动备份 goto 前期绑定 数据盘 ajax提交表单 多表关联 坐标 点滴 24天 Hibernate_JP atime informati 存储hmtl 递增 监听机制 拒绝服务攻击 nginx做负载CDN 同大 文件头 rewrite 进程间通信 模拟表单 Oracle客户端 zip扩展安装 截屏 Execpt 实际内存占用 JAVA对象转JSON max_user 异步回调 javascript:v 最小高度在IE atoi() lob file_get_con 京东秒杀软件 修改数据库名 文本信息 导入 获取本机公网 默认拷贝函数 合并表 卡号 Lesson01_08 php php计

赞助商链接