JavaScript实现网页图片等比例缩放实现代码及调用方式
更新时间：2013年02月25日 14:07:11 作者：
为了保证图片统一大小，直接设置图片大小又会导致图片拉伸,造成图片模糊，接下来将介绍的代码可以在图片加载完成后自动按比例调整图片大小，感兴趣的你可以参考下
在处理网页图片时,特别是一些图片列表的应用里面,很难保证图片统一大小,直接设置图片大小又会导致图片拉伸,造成图片模糊,本文介绍的代码可以在图片加载完成后自动按比例调整图片大小。
Javascript：
< script language="javascript" type="text/javascript">
< !--
// 说明：用 JavaScript 实现网页图片等比例缩放
// 整理：http://www.CodeBit.cn
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：
<img src="1148202890.jpg" alt="自动缩放后的效果" onload="javascript：DrawImage(this,200,200);" />
如果图片较大,建议在图片标签里面同时设置期望的图片大小,这样不会导致页面在加载中撑开,该大小不会影响最终缩放效果。可以修改上面的代码为：
Code：
<img src="1148202890.jpg" alt="自动缩放后的效果" width="200" height="200" onload="javascript：DrawImage(this,200,200);" />
Javascript：
复制代码 代码如下:
< script language="javascript" type="text/javascript">
< !--
// 说明：用 JavaScript 实现网页图片等比例缩放
// 整理：http://www.CodeBit.cn
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：
复制代码 代码如下:
<img src="1148202890.jpg" alt="自动缩放后的效果" onload="javascript：DrawImage(this,200,200);" />
如果图片较大,建议在图片标签里面同时设置期望的图片大小,这样不会导致页面在加载中撑开,该大小不会影响最终缩放效果。可以修改上面的代码为：
Code：
复制代码 代码如下:
<img src="1148202890.jpg" alt="自动缩放后的效果" width="200" height="200" onload="javascript：DrawImage(this,200,200);" />
相关文章
这篇文章主要介绍了javascript实现全角与半角字符的转换的相关代码与知识点分享,需要的朋友可以参考下2015-01-01
下面小编就为大家分享一篇用JS实现非首屏图片延迟加载的示例，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-01-01
下面小编就为大家带来一篇JavaScript数据操作_浅谈原始值和引用值的操作本质。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2016-08-08
bootstrap-table 是一个轻量级的table插件，使用AJAX获取JSON格式的数据，其分页和数据填充很方便，支持国际化。这篇文章介绍了bootstrap中table分页插件的使用，感兴趣的朋友一起看看吧2016-10-10
本文给大家分享一个带有变形动画特效的下拉导航菜单特效，该导航菜单在菜单项之间切换时，下拉菜单会快速的根据菜单内容的大小来动态变形，显示合适的下拉菜单大小，效果非常棒。对导航下拉菜单代码感兴趣的朋友可以参考下本文2016-11-11
复制到剪贴板的js代码（兼容ie、firefox、chorme、safari...什么都兼容！）2011-10-10
在现代Web应用中,为了提升用户体验并确保系统的稳定性和一致性,部署前端版本更新后及时提醒用户进行页面刷新是至关重要的,所以本文给大家介绍了基于前端实现版本更新自动检测的流程步骤,需要的朋友可以参考下2025-03-03
这篇文章主要为大家详细介绍了JavaScript实现异步获取表单数据，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2021-05-05
这篇文章主要介绍了微信小程序实现横向滚动导航栏效果，本文通过实例代码给大家介绍的非常详细，具有一定的参考借鉴价值,需要的朋友可以参考下2019-12-12
这篇文章主要为大家详细介绍了如何利用css+原生js制作简单的钟表，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2016-07-07
最新评论