JavaScript等比例缩放图片控制超出范围的图片
更新时间：2013年08月06日 15:56:40 作者：
当网页加载一个尺寸比较大的图片时，往往会把一个网页撑的变形，页面变得很难看，于是我们就想到了用JS去控制超出一定范围的图片
js等比例缩放图片，这个功能非常实用，当网页加载一个尺寸比较大的图片时，往往会把一个网页撑的变形，页面变得很难看，于是我们就想到了用JS去控制超出一定范围的图片，脚本之家以稳定页面布局，本代码段就是完成了此功能，而且代码非常简洁，效果很好。
<html><head><title>等比例缩放图片</title><script>function
DrawImage(ImgD,iwidth,iheight){ //参数(图片,允许的宽度,允许的高度)
var
image=new Image(); image.src=ImgD.src;
if(image.width>0
&& image.height>0){ if(image.width/image.height>=
iwidth/iheight){ if(image.width>iwidth){
ImgD.width=iwidth;
ImgD.height=(image.height*iwidth)/image.width;
}else{
ImgD.width=image.width;
ImgD.height=image.height;
}
}else{
if(image.height>iheight){
ImgD.height=iheight;
ImgD.width=(image.width*iheight)/image.height;
}else{
ImgD.width=image.width;
ImgD.height=image.height;
}
}
}
}
</script></head><body><img
src=https://www.jb51.net/uploadfile/2013/0803/20130803034531502.jpg"
alt="自动缩放后的效果"
width="100"
height="100"
onload="javascript：DrawImage(this,80,80)"
/></body></html>
复制代码 代码如下:
<html><head><title>等比例缩放图片</title><script>function
DrawImage(ImgD,iwidth,iheight){ //参数(图片,允许的宽度,允许的高度)
var
image=new Image(); image.src=ImgD.src;
if(image.width>0
&& image.height>0){ if(image.width/image.height>=
iwidth/iheight){ if(image.width>iwidth){
ImgD.width=iwidth;
ImgD.height=(image.height*iwidth)/image.width;
}else{
ImgD.width=image.width;
ImgD.height=image.height;
}
}else{
if(image.height>iheight){
ImgD.height=iheight;
ImgD.width=(image.width*iheight)/image.height;
}else{
ImgD.width=image.width;
ImgD.height=image.height;
}
}
}
}
</script></head><body><img
src=https://www.jb51.net/uploadfile/2013/0803/20130803034531502.jpg"
alt="自动缩放后的效果"
width="100"
height="100"
onload="javascript：DrawImage(this,80,80)"
/></body></html>
相关文章
这篇文章主要介绍了JS模拟Dialog弹出浮动框效果代码,涉及JavaScript可拖动窗口的创建及布局相关技巧,具有一定参考借鉴价值,需要的朋友可以参考下2015-10-10
Javascript实现的常用算法（如冒泡、快速、鸽巢、奇偶等）
这篇文章主要介绍了Javascript实现的常用算法,如冒泡、快速、鸽巢、选择、木桶、奇偶等,需要的朋友可以参考下2014-04-04
在微信小程序中,我们无法直接通过 bindtap="handleClick(1,2,3)" 的方式传递参数,而是通过自定义属性data- 的方式传递,并在事件回调函数中通过event.currentTarget.dataset获取这些参数,本文给大家介绍小程序 bindtap 事件多参数传递的实例代码,感兴趣的朋友一起看看吧2023-12-12
JS网络游戏-(模拟城市webgame)提供的一些例子下载...2007-10-10
avaScript 中的 this 关键字，深入浅出的分析其在不同情况下的含义，形成这种情况的原因以及 Dojo 等 JavaScript 工具中提供的绑定 this 的方法。可以这样说，正确掌握了 JavaScript 中的 this 关键字，才算迈入了 JavaScript 这门语言的门槛。2014-12-12
条件表达式，是我们在coding过程中永远躲不开的问题，也是我们骗代码行数最方便的东西，但作为一名程序员，我们也要追求自己的“信达雅”，下面就让我们看看以下几种常见的条件表达场景，如何写的漂亮！2021-05-05
这篇文章主和要介绍了fetch 使用及如何接收JS传值,文中给大家提到了fetch基本使用方式和接收js传值的使用方式,需要的朋友可以参考下2017-11-11
本文主要分享了js实现简单的计算器功能的示例代码。具有一定的参考价值，下面跟着小编一起来看下吧2017-01-01
下面小编就为大家带来一篇完美解决JS文件页面加载时的阻塞问题。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2016-12-12
本文主要对js表达式与js运算符进行详细介绍。具有很好的参考价值。下面跟着小编一起来看下吧2017-02-02
最新评论