用 JavaScript 实现网页图片等比例缩放

我就是个世界14年前DIV+CSS2112
在处理网页图片时,特别是一些图片列表的应用里面,很难保证图片统一大小,直接设置图片大小又会导致图片拉伸,造成图片模糊,本文介绍的代码可以在图片加载完成后自动按比例调整图片大小。
[separator]
[code]
<script language="JavaScript" type="text/javascript">
// 说明:用 JavaScript 实现网页图片等比例缩放
//调用方式:
//  <img src="1148202890.jpg" alt="自动缩放后的效果" onload="javascript:DrawImage(this,200,200);" />
//如果图片较大,建议在图片标签里面同时设置期望的图片大小,这样不会导致页面在加载中撑开,该大小不会影响最终缩放效果。可以修改上面的代码为:
//  <img src="1148202890.jpg" alt="自动缩放后的效果" width="200" height="200" onload="javascript:DrawImage(this,200,200);" />
function DrawImage(ImgD,FitWidth,FitHeight){
    var image=new Image();
    image.src=ImgD.src;
    if(image.width>0 && image.height>0){
        if(image.width/image.height>= FitWidth/FitHeight){
            if(image.width>FitWidth){
                ImgD.width=FitWidth;
                ImgD.height=(image.height*FitWidth)/image.width;
            }else{
                ImgD.width=image.width;
                ImgD.height=image.height;
            }
        } else{
            if(image.height>FitHeight){
                ImgD.height=FitHeight;
                ImgD.width=(image.width*FitHeight)/image.height;
            }else{
                ImgD.width=image.width;
                ImgD.height=image.height;
            }
        }
    }
}
</script>
[/code]

相关文章

JS eval(function(p,a,c,k,e,r){e=function(c)*****解密

[b]解密步骤:[/b]         1.新建html页面,把以下代码拷进去,运行。  &nbs...

a.white:hover与.white A:hover的区别

.white A:active {    TEXT-DECORATION: none}.white A:hover {   &nb...

DIV+CSS中新闻列表最简单的布局(标题靠左,日期靠右,不需要浮动!)

DIV+CSS中最简单的布局,标题靠左,时间靠右 ,不需要浮动![code]<!DOCTYPE html><html>    <h...

DIV层切换效果

网上流行的DIV层切换效果代码代码如下:[separator][code]<html><head><title>DIV层切换</title><sc...

用css完美实现新闻列表标题的截取

[quote]更新:[code]text-overflow:ellipsis;[/code]可以把截取的最后变成省略号,很不错的功能,在[url=http://www.blueidea.com/bbs...

客户端特效集合

[code]<p style=line-height: 150%>1.  oncontextmenu="window.event.returnvalue=fa...

发表评论    

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。