图片自适应容器的一段Javascript

/*
    image--图片对象
    iwidth--容器宽度
    iheight--容器高度
*/
function onloadImg(image,iwidth,iheight)
{
     var width = image.width;   //图片原始宽度
     var height = image.height; //图片原始高度
     var newwidth = 0,newheight = 0;//初始化新的宽度和高度
     if(width > 0 && height > 0)  //如果图片的宽高都大于0
     {
        if (width / height >= iwidth / iheight)    //如果原图片的比例大于或等于需要适应的比例
        {
            if (width > iwidth)    //如果原图片宽度大于容器的宽度,那么就按宽度压缩
            {
                newwidth = iwidth;
                newheight = (height * iwidth) / width;
               
            }
            else
            {
                newwidth = width;
                newheight = height;
              
            }
            if (newheight > iheight)  //如果压缩后的图片高度仍然大于容器高度,那么再继续将图片宽度/高度压缩
            {
                newwidth = newwidth * iheight / newheight;
                newheight = iheight;
            }
        }
        else //如果原图片比例小于需要适应的比例
        {
            if (height > iheight)       //如果原图片高度大于需要容器的高度,那么就按高度压缩
            {
                newheight = iheight;
                newwidth = (width * iheight) / height;
              
            }
            else
            {
                newwidth = width;
                newheight = height;
            }
            if (newwidth > iwidth)  //如果压缩后的图片宽度仍然大于容器宽度,那么再继续将图片宽度/高度压缩
            {
                newheight = newheight * iwidth / newwidth;
                newwidth = iwidth;
            }
        }
    }
    if(newwidth > 0 && newheight > 0)
    {
        image.width = newwidth;
        image.height = newheight;
    }
}

 

posted @ 2016-05-17 10:41  lovemx  阅读(152)  评论(0)    收藏  举报