<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<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 />
onload="AutoResizeImage(0,0,this)<br />
<a href="http://p.blog.csdn.net/images/p_blog_csdn_net/feng_sundy/421506/o_09925c7bcead8c60f683298dacf497a6.jpg" target="_blank"><img src="http://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 />
onload="AutoResizeImage(250,0,this)"<br />
<a href="http://blog.csdn.net/feng_sundy/archive/2008/06/19/2566028.aspx" target="_blank"><img src="http://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 />
onload="AutoResizeImage(0,250,this)"<br />
<a href="http://blog.csdn.net/feng_sundy/archive/2008/06/19/2566028.aspx" target="_blank"><img src="http://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 />
onload="AutoResizeImage(250,250,this)"<br />
<a href="http://blog.csdn.net/feng_sundy/archive/2008/06/19/2566028.aspx" target="_blank"><img src="http://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 />
onload="AutoResizeImage(400,512,this)"<br />
<a href="http://blog.csdn.net/feng_sundy/archive/2008/06/19/2566028.aspx" target="_blank"><img src="http://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 />
onload="AutoResizeImage(300,600,this)"<br />
<a href="http://blog.csdn.net/feng_sundy/archive/2008/06/19/2566028.aspx" target="_blank"><img src="http://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 />
onload="AutoResizeImage(500,600,this)"<br />
<a href="http://blog.csdn.net/feng_sundy/archive/2008/06/19/2566028.aspx" target="_blank"><img src="http://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>
转自：http://zxianf.blog.163.com/blog/static/30120701201102123637150/
我的主页：
www.naxsu.com
分享到：
相关推荐
图片等比例缩放是指在调整图片大小时，保持图片的宽高比不变，避免图片因缩放导致的变形。这种技术尤其在响应式网页设计中非常有用，可以确保图片在不同尺寸的屏幕上均能保持美观。 在给定的文件内容中，描述了一个...
在网页设计中，动态的图片展示效果可以提升用户体验，其中一种常见的技术是通过JavaScript实现鼠标滚动时图片等比例缩放。这个技术的核心在于利用JavaScript事件监听和CSS3变换功能，来实现图片随着页面滚动而优雅地...
JS控制图片大小（等比例缩放）
在JavaScript（JS）编程中，控制图片的放大、缩小以及按照比例显示是常见的需求，尤其在网页设计和交互效果中。下面将详细讲解如何利用JavaScript实现这些功能。 1. **图片放大与缩小** - **鼠标滚动事件**：在...
这些工具通常提供“自由变换”功能，允许用户输入特定的缩放比例，或者通过拖动角落的控制点来等比例调整图片大小。 在编程领域，我们也可以利用各种编程语言实现图片的按比例缩放。例如，Python中的PIL（Pillow）...
在JavaScript中，实现图片的等比例缩放以保持不失真是一项常见的需求，特别是在网页设计和动态展示中。这里我们将深入探讨如何实现这一功能，并解决图片在切换时保持正确比例的问题。 首先，我们要明白图片不失真的...
js等比例缩放页面图片大小 // JavaScript Document function handle_img(tagimg_name,tagimg_width,tagimg_height){ var img_object=new Image(); var get_imgs=document.getElementsByName(tagimg_name); for...
在JavaScript中，图片等比例缩放是一项常见的任务，特别是在网页开发和图像处理中。这个压缩包文件中的代码可能提供了一种方法，使用户能够上传图片并自动将其等比例缩放到预设的尺寸，同时尽可能减少失真。接下来，...
"js图片缩放效果制作鼠标滚动图片等比例缩放代码"是一个JavaScript实现的项目，它旨在提供一种动态的、响应式的图片展示解决方案，特别是在用户滚动页面时，图片能按照其原始比例进行平滑缩放。这个项目的核心目标是...
本文将详细介绍如何使用JavaScript来实现通过鼠标滚轮控制图片缩放效果的方法，其中将涉及onmousewheel事件的使用以及JavaScript操作DOM来调整图片大小的技巧。 首先，我们应当理解onmousewheel事件。这是一个鼠标...
在网页中，我们可以通过CSS（Cascading Style Sheets）来控制图片的显示，包括设置图片的宽度和高度。然而，直接设置固定尺寸可能会导致图片失真，因为图片的比例被强行改变。 为了保持图片的比例，我们可以使用CSS...
在JavaScript（JS）编程中，实现相册图片的动感缩放显示效果是一种常见的需求，尤其在网站设计和广告展示中。这种效果能够增加用户的交互体验，使内容更加生动有趣。本篇文章将深入探讨如何利用JavaScript实现这样的...
该压缩包文件“js实现的鼠标滚动控制图片在原始位置等比例缩放特效源码.zip”包含了一个使用JavaScript实现的前端特效，它允许用户通过鼠标滚动来控制网页上的图片在其原始位置进行等比例缩放。这个特性在网页设计...
本文将详细解析如何使用 JavaScript 实现等比例缩放图片，以控制其超出预设范围。 首先，我们来看一段实现这一功能的 JavaScript 代码： ```html 等比例缩放图片 function DrawImage(ImgD, iwidth, iheight)...
例如，通过获取图片元素并修改其`width`和`height`属性，或者使用CSS的`transform`属性实现等比例缩放： ```javascript let imgElement = document.querySelector('img'); imgElement.style.transform = 'scale(0.8...
例如，使用Hammer.js库可以轻松地添加捏合手势来控制图片缩放。 总的来说，JavaScript实现图片缩放功能可以通过CSS3的`transform`、JavaScript的DOM操作或者Canvas的绘图方法来完成。具体选择哪种方式取决于应用...
本文将深入探讨如何使用JavaScript（JS）来控制图片上传的大小，确保用户上传的图片符合预设的标准。 一、图片上传前的前端验证 在用户提交图片之前，前端验证是最直接的控制方式。可以使用HTML5的`FileReader API...
本资源“jQuery实现图片等比例缩放截取显示特效源码.zip”提供了一种利用jQuery实现图片等比例缩放并进行截取显示的特效代码。这个功能在网页设计和开发中非常常见，特别是对于图像展示、相册应用或任何需要对图片...
代码可能包含函数来获取图片原始尺寸，计算缩放比例，更新CSS属性以改变图片大小。JavaScript还可能处理用户的交互，比如响应鼠标滚轮或触摸屏手势，实现平滑的缩放效果。可能使用的JavaScript库包括jQuery或原生的...