javascript自动适应图片大小

博客来源 http://blog.csdn.net/eduxh/article/details/1906246

//图片自适应大小
//id为img控件的id
//width与height为img父控件的宽高——即img的最大宽高
//示例:<img id="dd" src="ee.jpg"  />"
function imgFit(id,width,height)
{
    var imageArr=document.getElementById(id);
    if(imageArr.offsetWidth>width || imageArr.offsetHeight>height)
    {
        imageRate1=parseInt(imageArr.offsetWidth)/width;
        imageRate2=parseInt(imageArr.offsetHeight)/height;
        if(imageRate2>imageRate1)
            imageArr.style.height = imageArr.offsetHeight/imageRate2+"px";
        else
            imageArr.style.width = imageArr.offsetWidth/imageRate1 +"px";
    }
}

添加居中处理:

function imgFit(imageArr,width,height)
{
    //var imageArr=document.getElementById(id);
    //if(imageArr.offsetWidth>width || imageArr.offsetHeight>height)
    //{
    //alert(imageArr.style.marginTop);
        sWidth=imageArr.offsetWidth;
        sHeight=imageArr.offsetHeight;
        imageRate1=parseInt(imageArr.offsetWidth)/width;
        imageRate2=parseInt(imageArr.offsetHeight)/height;
        if(imageRate2>imageRate1)
        {
            imageArr.style.height = sHeight/imageRate2+"px";
            imageArr.style.marginLeft=(width-sWidth/imageRate2)/2+"px";
        }
        else
        {
            imageArr.style.width = sWidth/imageRate1 +"px";
            imageArr.style.marginTop=(height-sHeight/imageRate1)/2+"px";
        }   
        //alert(imageArr.offsetWidth+":"+imageArr.offsetHeight);
    //}
}

时间: 2024-10-16 01:01:45

javascript自动适应图片大小的相关文章

关于前端使用JavaScript获取base64图片大小的方法

base64原理 Base64编码要求把3个8位字节(38=24)转化为4个6位的字节(46=24),之后在6位的前面补两个0,形成8位一个字节的形式. 如果剩下的字符不足3个字节,则用0填充,输出字符使用'=',因此编码后输出的文本末尾可能会出现1或2个'=' 如何获取base64图片大小 通过base64编码原理我们知道,base64的图片字符流中的每8个字符就有两个是用0补充,而且字符流的末尾还可能存在'='号,我们可以通过这个原理计算图片的文件流大小. getImgByteSize(da

Javascript自动换图片

<!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="Content-

asp.net上传图片文件自动修改图片大小代码

#region 图片缩放 /// <summary> /// 图片缩放 /// </summary> /// <param name="savePath">图片相对路径</param> /// <param name="fileName">图片名称</param> /// <param name="destWidth">缩放宽度</param> ///

推荐一个Xcode插件: KSImageNamed (自动补全图片文件名称, 并显示图片大小)

http://www.csdn.net/article/2014-05-04/2819586-the-best-xcode-plugins 5. KSImageNamed KSImageNamed是一款能够帮助开发者在Xcode中自动补全图片文件名称的插件,其开发者Kent Sutherland来自美国波士顿.KSImageNamed支持NSImage和UIImage,当开发者写到"[UIImage imaged:"时,便会自动将项目中的图片名称提示出来.此外,KSImageNamed

div css布局中CSS图片大小自动按比例等比例缩小图片不变形解决技巧(转)

在DIV CSS布局中对于图片列表或图片排版时,图片不是固定宽度高度大小,但图片占位是固定宽度高度,这个时候如果使用CSS固定死图片大小(宽度 高度),这个时候如果图片相对于这个位置不是等比例大小,那么这张图片就会变形,让图片变的不清晰,这个时候想让图片不变形又按比例缩放,如何解决?CSS图片缩小不变形,图片自动缩小,图片按比例等比例缩小不变形解决. 解决方法有两种: 第一种,让图片和布局宽度高度成等比例,这样CSS设置死宽度和高度,图片也是等比例缩小,图片也不会变形. 比如淘宝,要求店铺主上传

最新javascript自动按比例显示图片,按比例压缩图片显示

<!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="Content-Typ

CSS强制图片大小

相信大家做网页时经常会碰到大分辨率的图片会把表格涨破以致漂亮的网页面目全非,但只要使用以下的CSS语句即可解决. 该CSS的功能是:大于600的图片自动调整为600显示. <style type="text/css"><!-- img {width:expression(this.width>600?"600px":this.width+"px");}} --></style> 上面的代码在使用的过程中发

JavaScript实现判断图片是否加载完成的3种方法整理

JavaScript实现判断图片是否加载完成的3种方法整理 有时候我们在前端开发工作中为了获取图片的信息,需要在图片加载完成后才可以正确的获取到图片的大小尺寸,并且执行相应的回调函数使图片产生某种显示效果.本文主要整理了几种常见的javascipt判断图片加载完成时的方法,并通过代码与实际应用相结合进行解释与说明. onload方法 通过向img标签添加onload属性,并填入相应的函数来执行后续的javascipt代码.如下代码例子中img元素默认是不显示的,通过onload判断加载完成后再将

JQury自动切换图片

[标签]Jquery图片自动切换<!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=&