JS控制图片显示的大小（图片等比例缩放）

最新推荐文章于 2024-04-15 10:09:15 发布
最新推荐文章于 2024-04-15 10:09:15 发布
阅读量1.3k 收藏
点赞数
分类专栏： Web前端 文章标签： js 图片等比缩放 等比
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/xxf159797/article/details/79390541
版权
  1. <html xmlns="http://www.w3.org/1999/xhtml">  
  2. <head>  
  3. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  
  4. <title>最新javascript自动按比例显示图片，按比例压缩图片显示</title>  
  5. <script type="text/javascript">  
  6. function AutoResizeImage(maxWidth,maxHeight,objImg){  
  7. var img = new Image();  
  8. img.src = objImg.src;  
  9. var hRatio;  
  10. var wRatio;  
  11. var Ratio = 1;  
  12. var w = img.width;  
  13. var h = img.height;  
  14. wRatio = maxWidth / w;  
  15. hRatio = maxHeight / h;  
  16. if (maxWidth ==0 && maxHeight==0){  
  17. Ratio = 1;  
  18. }else if (maxWidth==0){//  
  19. if (hRatio<1) Ratio = hRatio;  
  20. }else if (maxHeight==0){  
  21. if (wRatio<1) Ratio = wRatio;  
  22. }else if (wRatio<1 || hRatio<1){  
  23. Ratio = (wRatio<=hRatio?wRatio:hRatio);  
  24. }  
  25. if (Ratio<1){  
  26. w = w * Ratio;  
  27. h = h * Ratio;  
  28. }  
  29. objImg.height = h;  
  30. objImg.width = w;  
  31. }  
  32. </script>  
  33. </head>  
  34. <body>  
  35. <br />  
  36. 原图显示（534 X 800）<br />  
  37. onload="AutoResizeImage(0,0,this)<br />  
  38. <a href="https://p-blog.csdn.net/images/p_blog_csdn_net/feng_sundy/421506/o_09925c7bcead8c60f683298dacf497a6.jpg" target="_blank"><img   
  39.   
  40. 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 />  
  41. 1.按宽度250压缩,不限制高度 按比例压缩<br />  
  42. onload="AutoResizeImage(250,0,this)"<br />  
  43. <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"   
  44.   
  45. border="0" width="0" height="0" onload="AutoResizeImage(250,0,this)"  alt="250 X 374"/></a><br /><br />  
  46. 2.按高度250压缩,不限制宽度 按比例压缩<br />  
  47. onload="AutoResizeImage(0,250,this)"<br />  
  48. <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"   
  49.   
  50. border="0" width="0" height="0" onload="AutoResizeImage(0,250,this)"  alt="166 X 250"/></a><br /><br />  
  51. 3.按高度250宽度250 按比例压缩<br />  
  52. onload="AutoResizeImage(250,250,this)"<br />  
  53. <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"   
  54.   
  55. border="0" width="0" height="0" onload="AutoResizeImage(250,250,this)"  alt="200 X 300"/></a><br /><br />  
  56. 4.高宽不等比例压缩 （400 X 512）,此时高度不变，会自动按高度的比例压缩。<br />  
  57. onload="AutoResizeImage(400,512,this)"<br />  
  58. <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"   
  59.   
  60. border="0" width="0" height="0" onload="AutoResizeImage(400,512,this)"  alt="341 X 512"/></a><br /><br />  
  61. 5.高宽不等比例压缩 （300 X 600）,此时宽度不变，会自动按宽度的比例压缩。<br />  
  62. onload="AutoResizeImage(300,600,this)"<br />  
  63. <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"   
  64.   
  65. border="0" width="0" height="0" onload="AutoResizeImage(300,600,this)"  alt="300 X 449"/></a><br /><br />  
  66. 6.如果图片本来的高度和宽度小于压缩的最大高度和宽度，则不会拉大显示图片（按原图显示）<br />  
  67. 原图444 x 207,压缩为 500 x 600,将保持原图显示<br />  
  68. onload="AutoResizeImage(500,600,this)"<br />  
  69. <a href="http://blog.csdn.net/feng_sundy/archive/2008/06/19/2566028.aspx" target="_blank"><img   
  70.   
  71. 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   
  72.   
  73. 207"/></a><br /><br />  
  74. </body>  
  75. </html> 
xxf159797
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
前端学习代码实例-JavaScript 图片等比例缩放裁切详解
qiancheng9998的博客
04-29 1649
本文将通过代码实例详细介绍一下如何实现图片等比例缩放裁切效果。 图片有两种应用方式，一种作为子元素存在，一种是作为背景图片。 在每一种应用方式中，图片的等比例缩放又可以大致分为如下几种情况： （1）.确保图片能够填充满元素，超出的部分被裁切或者隐藏。 （2）.确保图片的长或者宽填充满元素，超出的部分被裁切或者隐藏。 下面通过代码实例分别介绍一下上述列举的中可能，需要的朋友可以做一下参考。 一.作为...
JS实现控制图片显示大小的方法【图片等比例缩放功能】
10-20
主要介绍了JS实现控制图片显示大小的方法,即实现图片等比例缩放功能,涉及JS动态操作页面元素属性相关技巧,需要的朋友可以参考下
HTML <img> 标签的 height 和 width 属性
weixin_34329187的博客
01-29 1048
定义和用法 &lt;img&gt; 标签的 height 和 width 属性设置图像的尺寸。 提示：为图像指定 height 和 width 属性是一个好习惯。如果设置了这些属性，就可以在页面加载时为图像预留空间。如果没有这些属性，浏览器就无法了解图像的尺寸，也就无法为图像保留合适的空间，因此当图像加载时，页面的布局就会发生变化。（下面的篇幅详细解释了这个观点）。 提示：请不要通过 hei...
Js实现任意位置缩放图片，深入理解背后原理
最新发布
weixin_59837683的博客
04-15 823
本文将用一个简单的例子详细讲解如何用原生JS一步步实现完整的任意位置缩放图片功能，无任何第三方依赖，指针事件进行多端统一的事件监听，干货满满。
利用javascript实现图片等比例缩放
9年.NET撸码员，月薪5K
10-10 409
下面方法可以实现等比例缩放： 1． 把Image的Width和Height属性删除。 2.　把下面js代码复制在Image[color=red]后面[/color]（注意：这里假设你的Image名称叫“Image1”如果不同请把它改过来，图片按等比例缩放成200×200）。 [code="js"] function DrawImage() { var FitWidth = ...
H5实现浏览器全屏API(全屏进入和全屏退出)
热门推荐
qq_35515563的博客
06-05 1万+
【进入和退出全屏】 // Webkit (works in Safari5.1 and Chrome 15) element.webkitRequestFullScreen(); document.webkitCancelFullScreen();   // Firefox 10+ element.mozRequestFullScreen(); document.mozCance
JavaScript等比例缩放图片控制超出范围的图片
12-11
本文将详细解析如何使用 JavaScript 实现等比例缩放图片，以控制其超出预设范围。 首先，我们来看一段实现这一功能的 JavaScript 代码： ```html 等比例缩放图片 function DrawImage(ImgD, iwidth, iheight)...
JS控制图片大小（等比例缩放）
09-06
JS控制图片大小（等比例缩放）
vue实现图片按比例缩放问题操作
10-14
在Vue框架中，实现图片按比例缩放是一个常见的需求，特别是在布局设计中，保持图片的原始比例至关重要，以免导致图片失真。以下是如何在Vue中处理这个问题的详细步骤和相关知识点： 1. **图片比例计算**： 当需要...
JS---改变图片大小
weixin_34007879的博客
09-26 1926
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>改变图片大小 方法1</title> <script> function showbigger(){ ...
JS实现图片等比例缩小
10-22
纯JS手写来实现我们上传的图片可以等比例来缩小，图片不失真
js自动修改图片尺寸
06-05
js自动修改图片尺寸
js 获取图片原始宽高并等比例缩放
yezip的博客
03-22 3345
近期做一个驾考项目，由于每张图片加载的时候比例大小都不一样，在试题练习中加载图片时大部分图片会变形，导致图片展示效果非常差，所以我们可以获取图片的原始宽高，然后以等比例展示，效果会非常好。以下就是实现方法： html： <img style="max-height: 200px;max-width: 300px" src="demo.png"; onload="javascript:D...
图片等比例展示
赳赳万里鲲
03-27 560
/** * 图片等比例缩放 * @param boxW 容器宽 * @param boxH 容器高 * @param imgOriW 原始图片宽 * @param imgOriH 原始图片高 * @return {w: width,h: height} */ const imgScale = (boxW, boxH ,imgOriW, imgOriH) => { ...
js 调整图片大小
做最好的自己
06-11 5797
做网站的时候，客户自己发布的图片有的时候会把页面撑开，破坏页面的效果，用css表达的式的方式，图片比较大时经常不能达到限制图片尺寸的效果，于是写了一个可以限制指定图片的尺寸的js脚本。function resetpicsize(){ if(document.all.thispic.offsetWidth>480) {
script 实现图片缩小
也想快乐的生活
11-05 710
  script：function resizeimg(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){
js利用鼠标来控制图片的放大和缩小代码
06-07
以下是利用JavaScript实现鼠标控制图片放大和缩小的示例代码： ```html <!-- HTML结构 --> ``` ```css /* CSS样式 */ div { width: 500px; height: 500px; overflow: hidden; } img { width: 100%; ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值