`
zendj
  • 浏览: 122153 次
  • 性别: Icon_minigender_1
  • 来自: 深圳
文章分类
社区版块
存档分类
最新评论

图片自动缩小的js代码,用以防止图片撑破页面

阅读更多

JS代码(随便放文件哪里):
<script language="JavaScript">
<!--
var flag=false;
function DrawImage(ImgD){
var image=new Image();
image.src=ImgD.src;
if(image.width>0 && image.height>0){
flag=true;
if(image.width/image.height>= 180/110){
if(image.width>180){
ImgD.width=180;
ImgD.height=(image.height*110)/image.width;
}else{
ImgD.width=image.width;
ImgD.height=image.height;
}
/*ImgD.alt="bigpic" */
}
else{
if(image.height>110){
ImgD.height=110;
ImgD.width=(image.width*110)/image.height;
}else{
ImgD.width=image.width;
ImgD.height=image.height;
}
/*ImgD.alt="bigpic" */
}
}
}

//-->
</script>


图片使用的地方:
<img src="图片" border=0 width="180" height="110" onload="javascriptrawImage(this);">
width="180" height="110" 注意这里最好限定,如果不限定加载图时会成原大,然后再缩小,这个过程如果图大了很难看的.这里是宽度和高度,在前面的JS里改,这里也作相应的改.

图不会变形,只会按比列缩,放心

分享到:
评论

相关推荐

    百度百科图片放大缩小JS代码

    "百度百科图片放大缩小JS代码"指的是百度百科在网页中使用的JavaScript代码,用于实现用户对页面内图片的动态放大和缩小操作,从而让用户可以更清晰地查看细节,尤其是在处理较小或分辨率较高的图片时。 【描述】:...

    又一个图片自动缩小的JS代码

    这段代码是用于自动调整网页中图片大小的JavaScript函数,旨在避免大图片加载后对页面布局造成影响。通过分析代码,我们可以提取出以下几个重要的知识点: 1. **JavaScript图像对象(Image对象)**: JavaScript ...

    适合商品展示,图片通过按扭控制可等比例放大、缩小

    等比例缩放意味着在放大或缩小图片时,保持其长宽比不变,以防止图像失真。这种操作在商品展示中至关重要,因为它允许用户清晰地查看商品细节,而不改变其原始形状。 实现这一功能通常需要前端开发技术,如HTML、...

    javaScript实例自学手册486例,附带目录可方便搜索

    1.20 用JavaScript随机修改页面的标题.htm 1.21 判断网页加载完毕.htm 1.22 嵌入网页的播放器.htm 1.23 设置指定网页为主页.htm 1.24 使用JavaScript传递页面参数.htm 1.25 页面被冻结.htm 1.26 页面的地震...

    UIWebView的使用代码

    接口,如果为webView添加了delegate对象并实现该接口,那么在webView加载任何一个frame之前都会delegate对象的该方法,该方法的返回值用以控制是否允许加载目标链接页面的内容,返回YES将直接加载内容,NO则反之。...

    电子商务商城网站代码

    在用户选购好商品去结账时,根据结账页面的“本单积分支付额度:XX~XXX”给出的范围,将您想要支付的积分数额填写在“商品支付积分合计:”栏中,订单生成时会自动减少相应的支付金额。积分不可以购买非积分类商品...

    JavaScript实用范例词典04-14

    7.27 用方向键来控制图片的移动... 224 7.28 显示不同的鼠标指针样式... 226 7.29 使用外部的鼠标指针样式... 227 7.30 在超级链接上显示提示信息... 227 第8章 超链接篇.... 229 8.1 单击按钮链接到指定的网页...

    js使用小技巧

    Javascript小技巧一箩筐 事件源对象 event.srcElement.tagName event.srcElement.type 捕获释放 event.srcElement.setCapture(); event.srcElement.releaseCapture(); 事件按键 event.keyCode ...

Global site tag (gtag.js) - Google Analytics