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

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

时间： 2025-01-01 20:52:00

兼容ie、firefox的图片自动缩放方法的相关文章

兼容ie、firefox的图片自动缩放的css跟js代码分享_javascript技巧

这个功能主要是解决内容页中的图片过大撑出,导致页面比较难看,就需要这样的代码,需要的朋友可以参考下 需求:图片width<=600px,height<=800. 1.利用max-width,max-height使图片等比例自动缩放代码: 复制代码 代码如下: img{max-width: 600px;max-height: 800px;} 由于ie6不支持css max-width,max-height,所以在ie6中需要利用javascript脚本来控制大小. 2.用javascript脚本

兼容ie、firefox的图片自动缩放的css跟js代码分享_图象特效

需求:图片width<=330px,height<=150. 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.Offset

css 图片自动缩放

 代码如下 复制代码 <!doctype html public "-//w3c//dtd xhtml 1.0 transitional//en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv=&qu

ASP技巧之让图片自动缩放以适合界面大小

技巧 如何让图片自动缩放以适合界面大小,拿出你的Editplus,打开c_function.asp文件,找到UBBCode函数,在第417行有如下语句 If Instr(strType,"[image]")>0  And ZC_UBB_IMAGE_ENABLE Then  '[img]    objRegExp.Pattern="(\[IMG=)([0-9]*),([0-9]*),(.*)(\])(.+?)(\[\/IMG\])"    strContent=

如何让图片自动缩放以适合界面大小

如何让图片自动缩放以适合界面大小,拿出你的Editplus,打开c_function.asp文件,找到UBBCode函数,在第417行有如下语句   If Instr(strType,"[image]")>0  And ZC_UBB_IMAGE_ENABLE Then  '[img]     objRegExp.Pattern="(\[IMG=)([0-9]*),([0-9]*),(.*)(\])(.+?)(\[\/IMG\])"    strContent=

ASP程序实现图片自动缩放以适合界面大小

程序 如何让图片自动缩放以适合界面大小,拿出你的Editplus,打开c_function.asp文件,找到UBBCode函数 If Instr(strType,"[image]")>0  And ZC_UBB_IMAGE_ENABLE Then  '[img]     objRegExp.Pattern="(\[IMG=)([0-9]*),([0-9]*),(.*)(\])(.+?)(\[\/IMG\])"    strContent= objRegExp.

css 背景图片自动缩放实例

默认情况下,背景属性是平铺的,如果背景图片较大,而box小,那么就只能显示左上角那块背景.如果要让背景全部显示出来,  代码如下 复制代码 .color_checked {  float: right;  width: 16px;  height: 16px;  background: url(../images/color_check.png) center 0 no-repeat;  -webkit-background-size: cover;  -moz-background-size:

css expression 图片自动缩放

我们判断图片超过设置大小时就会自动缩放到指定大小的expression起到关键作用. <style>    .image {        max-width:600px;height:auto;cursor:pointer;        border:1px dashed #4e6973;padding: 3px;        zoom:expression( function(elm) {            if (elm.width>560) {              

CSS expression控制图片自动缩放效果代码[兼容 IE,Firefox]_经验交流

今天用了很久时间终于解决了这个问题,基本完美了,唯一不完美的就是 IE 6 只有在图片完全下载完成后才会自动调整大小,不过聊胜于无,总比进入页面后看到长长的横向滚动条舒服的多,这里使用了 expression,但是利用了一次加载,所以 expression 不会造成内存泄漏.当然,如果你有更好的解决方案,希望能与我交流. 代码如下: .Image { max-width:600px;height:auto;cursor:pointer; border:1px dashed #4E6973;pad