一聚教程网：一个值得你收藏的教程网站

ps教程| flash教程| 路由器设置| Jsp教程| 加入收藏

PHP教程 Css教程 操作系统 数据库 安卓下载

首页 游戏下载 软件下载 专题 资讯教程 php教程 asp.net教程 css教程 网页制作 网页特效 手机开发 办公数码
+ -
当前位置：一聚教程网 > 网页制作 > js教程

推荐专题

最新下载

热门教程

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

时间：2022-11-14 22:02:52 编辑：袖梨 来源：一聚教程网

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事件中，如果图片加载速度很慢的话，可能会有一个小缺陷】

相关文章

热门栏目

一聚教程网| 关于我们| 联系我们| 广告合作| 友情链接| 版权声明

copyRight@2007-2022 www.111CN.NET AII Right Reserved

网站内容来自网络整理或网友投稿如有侵权行为请邮件:[email protected] 我们24小时内处理