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

最新推荐文章于 2023-11-08 09:25:24 发布
最新推荐文章于 2023-11-08 09:25:24 发布
阅读量1.1w 收藏 3
点赞数
文章标签： 图片等比例缩放 
<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" οnlοad="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" οnlοad="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" οnlοad="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" οnlοad="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" οnlοad="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" οnlοad="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" οnlοad="AutoResizeImage(500,600,this)"  alt="444 X 

207"/></a><br /><br />
</body>
</html>

Jayzai
关注
  • 0
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
JS 按图片比例截取中间部分 缩略图不失真
11-22
JS按照图片比例缩放，截图图片中间部分，仿人人相册缩略图效果，保证图片不失真
JS实现控制图片显示大小的方法【图片等比例缩放功能】
10-20
主要介绍了JS实现控制图片显示大小的方法,即实现图片等比例缩放功能,涉及JS动态操作页面元素属性相关技巧,需要的朋友可以参考下
使用js对图片按照实际大小进行展示
feng_qin19936的博客
07-28 760
图片： &lt;img src="http://xxx.jpg" id="imgs" onload="adapt();"/&gt; 无需设置 width 、height   添加css样式： &lt;style type="text/css"&gt; &lt;!-- img{ max-width:100%;max-height:100%; } --&gt; &
JS实现等比例缩放图片
weixin_42599560的博客
01-09 2338
JS实现等比例缩放图片 有时候我们前端页面只有500×500像素的宽和高的布局，但是后台返回的数据图片是1000×1000，那么这种情况下 如果我直接返回的话 那么图片肯定有一部分没有显示出来，在这种情况下我是想能不能在我们前端开发实现图片等比例缩放。比如如下HTML代码： <div id="demo1"> <img src="http://img01.taobao...
实用技巧：js图片等比缩放
weixin_33972649的博客
11-23 94
经常看到一些网页，其中的图片比例失调，这里提供一组方法，供需要的朋友参考。基本构思如下：1、在指定宽度和高度范围内等比例最大化缩放图片；2、按指定宽度等比最大化缩放图片；3、按指定高度等比最大化缩放图片。原方法在pvo.js文件中，为了便于交流，在这里做了修改。&lt;!--胡开明2011-11-23--&gt;&lt;!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML ...
js 上传图片等比例缩放
qq_40946635的博客
09-04 1080
在JavaScript中，可以使用HTML5的Canvas元素以及相关的API来实现图片等比例缩放成特定像素。如何在JavaScript中将上传的图片等比例缩放成特定像素？
JavaScript等比例缩放图片控制超出范围的图片
12-11
本文将详细解析如何使用 JavaScript 实现等比例缩放图片，以控制其超出预设范围。 首先，我们来看一段实现这一功能的 JavaScript 代码： ```html 等比例缩放图片 function DrawImage(ImgD, iwidth, iheight)...
JS控制图片大小（等比例缩放）
09-06
JS控制图片大小（等比例缩放）
vue实现图片按比例缩放问题操作
10-14
在Vue框架中，实现图片按比例缩放是一个常见的需求，特别是在布局设计中，保持图片的原始比例至关重要，以免导致图片失真。以下是如何在Vue中处理这个问题的详细步骤和相关知识点： 1. **图片比例计算**： 当需要...
js实现图片压缩、分辨率等比例缩放
最新发布
weixin_43019353的博客
11-08 1058
js图片缩放，图片压缩
JS图片等比例缩放方法完整示例
10-21
主要介绍了JS图片等比例缩放方法,结合完整实例形式分析了javascript针对页面图片元素属性操作的相关技巧,需要的朋友可以参考下
js实现图片等比例缩放
06-09
js实现图片等比例缩放 我将网络上流传的，改成了横向居中和纵向居中，非常实用。
js实现图片上传并按比例缩放后预览
05-26
mvc框架下，用js控制，实现上传图片并按比例缩放后预览。经测试，在ie6、ie7、ie8、傲游浏览器上都可以使用,全用jsp标签也没问题。
JS 等比例缩放图片
lisa890608的专栏
07-11 653
var flag=false; function DrawImage(ImgD){  var image=new Image();  var iwidth = 150;  //定义允许图片宽度  var iheight = 150;  //定义允许图片高度  image.src=ImgD.src;  if(image.width>0 && image.height>0){
js获取图片原始比例并根据容器大小，图片比例缩放图片的宽高值
qq_37656005的博客
07-12 1427
js获取图片原始比例并根据容器大小，图片比例缩放图片的宽高值
【Java】将Base64格式的图片等比/非等比伸缩至目标尺寸代码实现
浩瀚宇宙的一粒尘埃
09-27 523
# 需求 前端页面上传的图片是Base64字符串，需要根据目标尺寸进行伸缩，不能改变图片的比例
js实现大图片等比例缩放
可控的事情要谨慎，不可控的事情要乐观。
12-27 1505
1.描述 首先看缩放前： 缩放后效果： 2.实现： 主要是在下面的body标签上调用onload <body onload="ResizeImages()"> <div class="w1170"> <div class="pLeft"> <div class="data_list"> <d...
JavaScript等比例缩放图片
语不惊人死不休
08-02 9467
js等比例缩放图片，这个功能非常实用，当网页加载一个尺寸比较大的图片时，往往会把一个网页撑的变形，页面变得很难看，于是我们就想到了用JS去控制超出一定范围的图片，以稳定页面布局，本代码段就是完成了此功能，而且代码非常简洁，效果很好。 等比例缩放图片 function DrawImage(ImgD,iwidth,iheight){ //参数(图片,允许的宽度,允许的高度)
js利用鼠标来控制图片的放大和缩小代码
06-07
以下是利用JavaScript实现鼠标控制图片放大和缩小的示例代码： ```html <!-- HTML结构 --> <div> <img id="img" src="image.jpg" alt="image"> </div> ``` ```css /* CSS样式 */ div { width: 500px; height: 500px; overflow: hidden; } img { width: 100%; height: 100%; transition: all 0.2s ease; } ``` ```javascript // JavaScript代码 const img = document.getElementById('img'); let scale = 1; // 鼠标滚轮事件 document.addEventListener('wheel', (e) => { e.preventDefault(); // 阻止页面滚动 let delta = Math.sign(e.deltaY); // 获取鼠标滚轮滚动方向 scale += delta * 0.1; // 改变缩放比例 scale = Math.max(0.1, Math.min(3, scale)); // 缩放比例限制在0.1~3之间 img.style.transform = `scale(${scale})`; // 应用缩放效果 }); // 鼠标拖拽事件 let isDragging = false; let startX, startY; let translateX = 0, translateY = 0; img.addEventListener('mousedown', (e) => { e.preventDefault(); isDragging = true; startX = e.clientX; startY = e.clientY; }); document.addEventListener('mousemove', (e) => { e.preventDefault(); if (isDragging) { let deltaX = e.clientX - startX; let deltaY = e.clientY - startY; translateX += deltaX; translateY += deltaY; img.style.transform = `scale(${scale}) translate(${translateX}px, ${translateY}px)`; startX = e.clientX; startY = e.clientY; } }); document.addEventListener('mouseup', () => { isDragging = false; }); ``` 代码解释： 1. HTML结构中包含一个容器div和一个图片img，容器设置为固定大小并隐藏超出部分，图片设置为100%宽高并添加过渡效果。 2. CSS样式中设置了容器的样式和图片的样式，并且为img添加了过渡效果。 3. JavaScript代码中定义了一个img元素和一个缩放比例scale，默认为1。 4. 监听鼠标滚轮事件，获取滚动方向，改变缩放比例，限制在0.1~3之间，然后应用缩放效果。 5. 监听鼠标拖拽事件，获取鼠标拖拽距离，根据鼠标拖拽距离改变图片的translateX和translateY属性值，应用缩放和平移效果。 6. 代码中使用了ES6的语法，如模板字符串和箭头函数。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值