<!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=gbk" />
<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 />
原图显示（338 X 450）<br />
<br />
<img src="http://ww3.sinaimg.cn/bmiddle/7b232d43tw1dtlas4qd31j.jpg" border="0" alt="534 X 800"/><br/><br />
1.按宽度250压缩,不限制高度 按比例压缩<br />
<br />
<img onload="AutoResizeImage(250,0,this)" src="http://ww3.sinaimg.cn/bmiddle/7b232d43tw1dtlas4qd31j.jpg" border="0" width="0" height="0" alt="250 X 374"/></a><br /><br />
2.按高度250压缩,不限制宽度 按比例压缩<br />
<br />
<img onload="AutoResizeImage(0,250,this)" src="http://ww3.sinaimg.cn/bmiddle/7b232d43tw1dtlas4qd31j.jpg" border="0" width="0" height="0" alt="166 X 250"/></a><br /><br />
3.按高度250宽度250 按比例压缩<br />
<br />
<img onload="AutoResizeImage(250,250,this)" src="http://ww3.sinaimg.cn/bmiddle/7b232d43tw1dtlas4qd31j.jpg" border="0" width="0" height="0" alt="200 X 300"/></a><br /><br />
4.高宽不等比例压缩 （338 X 300）,此时高度不变，会自动按高度的比例压缩。<br />
<br />
<img onload="AutoResizeImage(338,300,this)" src="http://ww3.sinaimg.cn/bmiddle/7b232d43tw1dtlas4qd31j.jpg" border="0" width="0" height="0" alt="341 X 512"/></a><br /><br />
5.高宽不等比例压缩 （200 X 450）,此时宽度不变，会自动按宽度的比例压缩。<br />
<br />
<img onload="AutoResizeImage(200,450,this)" src="http://ww3.sinaimg.cn/bmiddle/7b232d43tw1dtlas4qd31j.jpg" border="0" width="0" height="0" alt="300 X 449"/></a><br /><br />
6.如果图片本来的高度和宽度小于压缩的最大高度和宽度，则不会拉大显示图片（按原图显示）<br />
原图338 x 450,压缩为 500 x 600,将保持原图显示<br />
<br />
<img onload="AutoResizeImage(500,600,this)" src="http://ww3.sinaimg.cn/bmiddle/7b232d43tw1dtlas4qd31j.jpg" border="0" width="0" height="0" alt="444 X 207"/></a><br /><br />
</body>
</html>
分享到：
相关推荐
在JavaScript中，实现图片的等比例缩放以保持不失真是一项常见的需求，特别是在网页设计和动态展示中。这里我们将深入探讨如何实现这一功能，并解决图片在切换时保持正确比例的问题。 首先，我们要明白图片不失真的...
### JavaScript 实现网页图片等比例缩放 在网页设计与开发过程中，经常遇到的一个问题是确保图片能在不同设备、不同分辨率的屏幕上保持良好的显示效果。图片的等比例缩放是其中一种解决方案，它能够保证图片在缩放...
在JavaScript中实现图片的缩放功能是一项常见的任务，尤其在网页开发中，为了提供良好的用户体验，用户可能需要查看图片的细节或者节省空间显示概览。本文将深入探讨如何使用JavaScript来实现图片的放大和缩小功能。...
本篇文章将详细介绍如何利用JavaScript实现按比例缩放图片，以保持其原始比例，确保图片质量不受影响。 首先，我们需要理解图片变形和失真的原因。当一个图片的宽高比（宽度与高度的比例）与显示区域的宽高比不一致...
本篇将详细介绍如何使用JavaScript实现图片的等比例缩放，并通过一个完整的示例来解析其工作原理。 首先，我们需要理解等比例缩放的基本概念。等比例缩放是指在调整图片大小时，保持其宽高比不变，避免图像变形。在...
为了解决这个问题，我们可以使用JavaScript来实现图片的按比例缩放，确保图片始终保持其原始比例，避免变形。下面将详细介绍如何使用JavaScript来实现这一功能，并结合提供的文件进行解析。 首先，我们需要理解图片...
`Cropper.js` 是一个优秀的JavaScript库，专门用于实现高精度和灵活性的图片裁剪功能，它确保了裁剪后的图片不失真，因此非常适合用于制作 Banner、头像等应用场景。在本文中，我们将深入探讨`Cropper.js`的相关知识...
本教程将详细讲解JavaScript和jQuery如何实现图片的自动缩放功能。 首先，我们需要理解JavaScript和jQuery的基础。JavaScript是一种在客户端运行的脚本语言，用于增加网页的交互性；jQuery是一个JavaScript库，它...
通过以上步骤，我们就成功地使用jQuery实现了图片的动态缩放，无论是在页面初始化还是窗口大小变化时，都能保证图片的尺寸适配并且不失真。这个过程不仅涉及到了jQuery的基础操作，还展示了如何在实际项目中应用这些...
如果不按比例缩放，图片可能会被拉伸或压缩，导致失真。在处理图像时，保持原图的比例是非常重要的，因为它可以确保图片内容的清晰度和视觉效果。 缩放图片的工具和方法多种多样，其中最常用的是使用图像编辑软件，...
本文将详细讲解如何使用canvas实现原图等比例不失真绘制，并将绘制的海报图保存到本地相册。 首先，我们需要了解canvas的基本用法。Canvas是HTML5中引入的一个重要元素，它提供了一个画布，允许通过JavaScript进行...
为了保持图片的视觉效果不失真，等比例缩放成为了常用的一种处理方式。本篇文章将从一个具体的JavaScript代码示例出发，详细解析图片等比例缩放的技术实现细节。 #### 二、核心代码分析 首先，我们来看一下这段...
等比例缩放的基本原理是保持图片的纵横比不变，即在调整图片宽度或高度时，另一个维度也会相应按比例调整，以确保图片不失真。在JavaScript中，我们可以编写函数来实现这一功能。以下是一个简单的等比例缩放函数示例...
总结来说，这个项目提供了使用JavaScript和jQuery进行图片缩放、旋转和移动的基础实现，虽然它可能还有待完善，但对于初学者或希望快速实现类似功能的开发者来说，这是一个不错的学习资源。通过分析和理解这个项目的...
同时，为了保持良好的用户体验，插件可能还包括了防止图片过度缩放的限制机制，以避免图像失真。 3. **性能优化**：在移动端，资源加载速度和内存管理是关键。Sencha Touch框架本身就对这些方面进行了优化，而此...
有时候，我们需要根据不同的屏幕尺寸或布局需求，使得图片能够等比例地缩放，以保持其原始比例，避免失真。`JQuery`是一个流行的JavaScript库，它提供了丰富的功能和简便的API，帮助开发者更轻松地处理DOM操作、事件...
"原生JavaScript制作网页div里面大图片按比例缩放排列"这个主题聚焦于如何使用JavaScript动态调整图片尺寸，使其适应div容器并保持正确的比例，从而提供良好的用户体验。下面将详细介绍这个过程中的关键知识点。 1....
5. **JavaScript库支持**：Zoomify通常使用JavaScript库来实现交互效果，如平移、缩放等操作。这些库可以处理用户的输入事件，动态加载和显示图像块。 在实际应用中，Zoomify的实现步骤包括： 1. **准备高分辨率...
在描述中提到的"缩放改版为控制width和height"，这意味着开发者可能使用了JavaScript或者CSS来动态改变图片元素的宽度和高度，从而实现图片的缩放效果。这种方式相比直接修改图片的scale属性或者使用CSS的transform...
针对这一问题，我们可以利用编程技术实现图片按比例自动缩放到指定大小的功能。 首先，我们需要了解的是图片的尺寸单位通常为像素（pixels）。图片的宽度和高度可以用像素值表示，例如，一张图片的原始尺寸可能是...