JS控制图片显示的大小(图片等比例缩放)
<html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>最新javascript自动按比例显示图片,按比例压缩图片显示</title> <script type="text/javascript"> function AutoResizeImage(maxWidth,maxHeight,objImg){ var img = new Image(); img.src = objImg.src; var hRatio; var wRatio; var Ratio = 1; var w = img.width; var h = img.height; wRatio = maxWidth / w; hRatio = maxHeight / h; if (maxWidth ==0 && maxHeight==0){ Ratio = 1; }else if (maxWidth==0){// if (hRatio<1) Ratio = hRatio; }else if (maxHeight==0){ if (wRatio<1) Ratio = wRatio; }else if (wRatio<1 || hRatio<1){ Ratio = (wRatio<=hRatio?wRatio:hRatio); } if (Ratio<1){ w = w * Ratio; h = h * Ratio; } objImg.height = h; objImg.width = w; } </script> </head> <body> <br /> 原图显示(534 X 800)<br /> οnlοad="AutoResizeImage(0,0,this)<br /> <a href="https://p-blog.csdn.net/images/p_blog_csdn_net/feng_sundy/421506/o_09925c7bcead8c60f683298dacf497a6.jpg" target="_blank"><img src="https://p-blog.csdn.net/images/p_blog_csdn_net/feng_sundy/421506/o_09925c7bcead8c60f683298dacf497a6.jpg" border="0" width="0" height="0" onload="AutoResizeImage(0,0,this)" alt="534 X 800"/></a><br/><br /> 1.按宽度250压缩,不限制高度 按比例压缩<br /> οnlοad="AutoResizeImage(250,0,this)"<br /> <a href="http://blog.csdn.net/feng_sundy/archive/2008/06/19/2566028.aspx" target="_blank"><img src="https://p-blog.csdn.net/images/p_blog_csdn_net/feng_sundy/421506/o_09925c7bcead8c60f683298dacf497a6.jpg" border="0" width="0" height="0" onload="AutoResizeImage(250,0,this)" alt="250 X 374"/></a><br /><br /> 2.按高度250压缩,不限制宽度 按比例压缩<br /> οnlοad="AutoResizeImage(0,250,this)"<br /> <a href="http://blog.csdn.net/feng_sundy/archive/2008/06/19/2566028.aspx" target="_blank"><img src="https://p-blog.csdn.net/images/p_blog_csdn_net/feng_sundy/421506/o_09925c7bcead8c60f683298dacf497a6.jpg" border="0" width="0" height="0" onload="AutoResizeImage(0,250,this)" alt="166 X 250"/></a><br /><br /> 3.按高度250宽度250 按比例压缩<br /> οnlοad="AutoResizeImage(250,250,this)"<br /> <a href="http://blog.csdn.net/feng_sundy/archive/2008/06/19/2566028.aspx" target="_blank"><img src="https://p-blog.csdn.net/images/p_blog_csdn_net/feng_sundy/421506/o_09925c7bcead8c60f683298dacf497a6.jpg" border="0" width="0" height="0" onload="AutoResizeImage(250,250,this)" alt="200 X 300"/></a><br /><br /> 4.高宽不等比例压缩 (400 X 512),此时高度不变,会自动按高度的比例压缩。<br /> οnlοad="AutoResizeImage(400,512,this)"<br /> <a href="http://blog.csdn.net/feng_sundy/archive/2008/06/19/2566028.aspx" target="_blank"><img src="https://p-blog.csdn.net/images/p_blog_csdn_net/feng_sundy/421506/o_09925c7bcead8c60f683298dacf497a6.jpg" border="0" width="0" height="0" onload="AutoResizeImage(400,512,this)" alt="341 X 512"/></a><br /><br /> 5.高宽不等比例压缩 (300 X 600),此时宽度不变,会自动按宽度的比例压缩。<br /> οnlοad="AutoResizeImage(300,600,this)"<br /> <a href="http://blog.csdn.net/feng_sundy/archive/2008/06/19/2566028.aspx" target="_blank"><img src="https://p-blog.csdn.net/images/p_blog_csdn_net/feng_sundy/421506/o_09925c7bcead8c60f683298dacf497a6.jpg" border="0" width="0" height="0" onload="AutoResizeImage(300,600,this)" alt="300 X 449"/></a><br /><br /> 6.如果图片本来的高度和宽度小于压缩的最大高度和宽度,则不会拉大显示图片(按原图显示)<br /> 原图444 x 207,压缩为 500 x 600,将保持原图显示<br /> οnlοad="AutoResizeImage(500,600,this)"<br /> <a href="http://blog.csdn.net/feng_sundy/archive/2008/06/19/2566028.aspx" target="_blank"><img src="https://p-blog.csdn.net/images/p_blog_csdn_net/feng_sundy/242776/o_20070410_b7409cd284a0f799a357uePcEFa6ty0X.jpg" border="0" width="0" height="0" onload="AutoResizeImage(500,600,this)" alt="444 X 207"/></a><br /><br /> </body> </html>
JS控制图片显示的大小(图片等比例缩放)相关推荐
- word中图片为嵌入式格式时显示不全_打印Word图片显示不全 Word2007图片显示不全解决方法...
打印Word图片显示不全 Word2007图片显示不全解决方法,平凡的世界平凡的你,努力学习使我们变得不平凡,今天要介绍的知识是打印Word图片显示不全的相关知识,你准备好学习打印Word图片显示不全 ...
- Qt 图片显示不完全/图片显示变小 解决
窗口尺寸 正常, 图片尺寸 正常, 图片显示不完全/图片显示变小 原因: 图片新加入,更改过图片 解决方案: 重新构建项目,运行后正常
- 如何使用css样式将正方形图片显示为圆形图片布局
css3图片圆形显示如何使用css样式将正方形图片显示为圆形图片布局 1.图片实现圆形条件 2.使用布局技术 3.CSS圆角实现图片圆形实例 1.图片实现圆形条件 原本不是圆形图片,通过CSS样式布局 ...
- php 改变图片的宽高,php缩放图片(根据宽高的等比例缩放)示例
php缩放图片(根据宽高的等比例缩放)示例 发布于 2014-12-07 08:53:31 | 149 次阅读 | 评论: 0 | 来源: 网友投递 PHP开源脚本语言PHP(外文名: Hyperte ...
- [原创] 图片操作的类(ImageLibrary)-按比例缩放图片
[原创] 图片操作的类(ImageLibrary)-按比例缩放图片 http://www.vjsdn.com/bbs/bbsTopicDetails.aspx?pid=241 转载于:https:// ...
- js 获取图片原始宽高并等比例缩放
近期做一个驾考项目,由于每张图片加载的时候比例大小都不一样,在试题练习中加载图片时大部分图片会变形,导致图片展示效果非常差,所以我们可以获取图片的原始宽高,然后以等比例展示,效果会非常好.以下就是实现 ...
- android图片显示代码,Android图片处理:识别图像方向并显示(示例代码)
在Android中使用ImageView显示图片的时候发现图片显示不正.方向偏了或者倒过来了. 解决问题非常自然想到的分两步走:1.自己主动识别图像方向,计算旋转角度. 2.对图像进行旋转并显示. 一 ...
- js控制元素显示与否JS控制HTML元素的显示和隐藏
转载:https://www.cnblogs.com/unpolishedgem/p/3247098.html 利用来JS控制页面控件显示和隐藏有两种方法,两种方法分别利用HTML的style中的两个 ...
- PB :图片显示+数据库保留图片路径
分享一下最近用在pb数据窗口的一个显示图片的方法,,相互学习,,希望对你们有帮助,,哪里做得不好的地方可以建议下 图片显示的效果如下: 实现的思路: 1.数据窗口风格为grid风格,要显示图片的字段设 ...
最新文章
- 骑行广州大学城 外环十大校门
- 我所理解的OOP——UML六种关系
- mysql数据库访问控制_一文总结MySQL数据库访问控制实现原理
- vmware中修改ubuntu的分辨率
- 在长文本中当中使用正则表达式匹配限定长度范围的数字串的方法
- 文件上传漏洞——DVWA练习
- 在 MySQL 中使用 explain 查询 SQL 的执行计划(转自: 数据分析与开发)
- libvirt命令行文档
- 移动开发技术有哪些?
- 【Flutter 问题系列第 25 篇】Flutter 使用自定义字体
- python 腾讯视频签到_腾讯视频自动签到脚本.
- matlab 高维矩阵转置,matlab中关于矩阵的转置
- USB-HID鼠标键盘驱动
- Matplotlib 常用可视化操作
- Reference counted Objects (引用计数对象) - 文章翻译
- 报错解决:SyntaxError: Non-UTF-8 code starting with ‘\xe7‘
- java爬虫实战——实现简单的爬取网页数据
- tensorflow频域操作及梯度求取
- 测试基础知识DAY02
- 蓝桥杯 算法提高 回文串