最新文章专题视频专题问答1问答10问答100问答1000问答2000关键字专题1关键字专题50关键字专题500关键字专题1500TAG最新视频文章推荐1 推荐3 推荐5 推荐7 推荐9 推荐11 推荐13 推荐15 推荐17 推荐19 推荐21 推荐23 推荐25 推荐27 推荐29 推荐31 推荐33 推荐35 推荐37视频文章20视频文章30视频文章40视频文章50视频文章60 视频文章70视频文章80视频文章90视频文章100视频文章120视频文章140 视频2关键字专题关键字专题tag2tag3文章专题文章专题2文章索引1文章索引2文章索引3文章索引4文章索引5123456789101112131415文章专题3
当前位置: 首页 - 科技 - 知识百科 - 正文

JavaScript等比例缩放图片控制超出范围的图片_javascript技巧

来源:动视网 责编:小采 时间:2020-11-27 21:12:44
文档

JavaScript等比例缩放图片控制超出范围的图片_javascript技巧

JavaScript等比例缩放图片控制超出范围的图片_javascript技巧:js等比例缩放图片,这个功能非常实用,当网页加载一个尺寸比较大的图片时,往往会把一个网页撑的变形,页面变得很难看,于是我们就想到了用JS去控制超出一定范围的图片,脚本之家以稳定页面布局,本代码段就是完成了此功能,而且代码非常简洁,效果很好。
推荐度:
导读JavaScript等比例缩放图片控制超出范围的图片_javascript技巧:js等比例缩放图片,这个功能非常实用,当网页加载一个尺寸比较大的图片时,往往会把一个网页撑的变形,页面变得很难看,于是我们就想到了用JS去控制超出一定范围的图片,脚本之家以稳定页面布局,本代码段就是完成了此功能,而且代码非常简洁,效果很好。
 js等比例缩放图片,这个功能非常实用,当网页加载一个尺寸比较大的图片时,往往会把一个网页撑的变形,页面变得很难看,于是我们就想到了用JS去控制超出一定范围的图片,脚本之家以稳定页面布局,本代码段就是完成了此功能,而且代码非常简洁,效果很好。
代码如下:
等比例缩放图片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;
}
}
}
}
src=http://www.gxlcms.com/uploadfile/2013/0803/20130803034531502.jpg"
自动缩放后的效果"

width="100"

height="100"

onload="javascript:DrawImage(this,80,80)"

/>

文档

JavaScript等比例缩放图片控制超出范围的图片_javascript技巧

JavaScript等比例缩放图片控制超出范围的图片_javascript技巧:js等比例缩放图片,这个功能非常实用,当网页加载一个尺寸比较大的图片时,往往会把一个网页撑的变形,页面变得很难看,于是我们就想到了用JS去控制超出一定范围的图片,脚本之家以稳定页面布局,本代码段就是完成了此功能,而且代码非常简洁,效果很好。
推荐度:
标签: 图片 的图片 技巧
  • 热门焦点

最新推荐

猜你喜欢

热门推荐

专题
Top