laifangsong's blog

取长补短，精益求精。 (打个广告,想做手机网站和asp/asp.net网站的可以跟我联系.QQ:25313644)
posts - 51, comments - 193, trackbacks - 0, articles - 0
  博客园 :: 首页 :: 新随笔 :: 联系 :: 订阅 订阅 :: 管理

按比例显示缩略图，防止变形

Posted on 2006-10-24 08:31 laifangsong 阅读(490) 评论(3)  编辑 收藏 网摘 所属分类: asp

<html>
<head>
<script language='javascript'>
function showImg1(smallWidth, smallHeight)
{
    document.all.image1.src = document.all.file1.value;
    
    var bigWidth = document.all.image1.width;
    var bigHeight = document.all.image1.height;
    var div1 = bigWidth/bigHeight;
    var div2 = bigHeight/bigWidth;

    var n1 = 0;
    var n2 = 0;
    if(bigWidth>smallWidth)
    {
        n1 = bigWidth/smallWidth;
    }
    else
    {
        smallWidth = bigWidth;
    }
    if(bigHeight>smallHeight)
    {
        n2 = bigHeight/smallHeight;
    }
    else
    {
        smallHeight = bigHeight;
    }
    if(n1!=0 || n2!=0)
    {
        if(n1>n2)
        {
            smallHeight = smallWidth*div2;
        }
        else
        {
            smallWidth = smallHeight*div1;
        }
    }

    document.all.image2.width = smallWidth;
    document.all.image2.height = smallHeight;
    document.all.image2.src = document.all.file1.value;
}
</script>
</head>
<body>

<div id="div1">
      <img id="image1">
</div>

<table border=1><tr><td width=100 height=100 align="center" valign="center">
    <img id="image2" align="center">
</td></tr></table>

<form method="post" action="?action=get" action="">
<input type="file" id="file1" onpropertychange="showImg1(100, 100);"><br/>
</form>

</body>
</html>



<html>
<head>
<script language='javascript'>

function setImgSize(obj, defaultWidth, defaultHeight)
{
    var width = obj.width;
    var height = obj.height;
    if(width>defaultWidth || height>defaultHeight)
    {
        if(width>height)
        {
            obj.style.width = defaultWidth;
        }
        else
        {
            obj.style.height = defaultHeight;
        }
    }
}

</script>
</head>
<body>

<img src="images/1.gif" border=0 onload="javascript:setImgSize(this, 100, 100)"><br/><br/>

</body>
</html>

Feedback

#1楼    回复  引用  查看    

2006-10-24 13:39 by 空格      
没必要了,用CSS设置就行了, 只设高或宽

#2楼 [楼主]   回复  引用  查看    

2006-10-24 14:36 by laifangsong      
@空格
谢谢，用css原来就可以，真不知道

但是对于尺寸比较小的图片，只用css恐怕不行。

#3楼    回复  引用    

2008-06-21 11:40 by green source [未注册用户]
还是有用的,只设宽或高, 需不会变形,但是图片大小不一,不美观

标题  
姓名  
主页
Email (博主才能看到) 
验证码 *  看不清,换一张 [登录][注册]
内容(请不要发表任何与政治相关的内容)  
网站首页

新闻频道

社区

小组

博问

网摘

闪存

找找看
  登录  使用高级评论  新用户注册  返回页首  恢复上次提交      
该文被作者在 2007-06-27 08:20 编辑过
"五向定位"职业成长路线公开课(上海、南京、大连)
Google站内搜索


相关链接:

最新IT新闻:
最富有科技公司：中移动310亿美元居首
华盛顿抛弃微软Office 选择Google Apps
微软：WGA验证每小时黑屏是善意提醒
研究表明上网可以提高记忆力
为什么叫Windows 7？