下面方法可以实现等比例缩放：
1． 把Image的Width和Height属性删除。
2. 把下面js代码复制在Image
后面（注意：这里假设你的Image名称叫“Image1”如果不同请把它改过来，图片按等比例缩放成200×200）。
<script language="javascript" type="text/javascript">
function DrawImage()
{
var FitWidth = 200,FitHeight = 200;
var ImgD = document.getElementById('Image1');
var image = new Image();
image.src=ImgD.src;
if(image.width>0 && image.height>0)
{
if(image.width/image.height>= FitWidth/FitHeight)
{
if(image.width>FitWidth)
{
ImgD.width=FitWidth;
ImgD.height=(image.height*FitWidth)/image.width;
}
else
{
ImgD.width=image.width;
ImgD.height=image.height;
}
}
else
{
if(image.height>FitHeight)
{
ImgD.height=FitHeight;
ImgD.width=(image.width*FitHeight)/image.height;
}
else
{
ImgD.width=image.width;
ImgD.height=image.height;
}
}
}
}
DrawImage();
</script>
整个网页的源码如下：
<!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=gb2312" />
<title>图片等比例绽放</title>
</head>
<body>
<img src="Spring.jpg" id="Image1"/>
</body>
</html>
<script language="javascript" type="text/javascript">
function DrawImage()
{
var FitWidth = 200,FitHeight = 200;
var ImgD = document.getElementById('Image1');
var image = new Image();
image.src=ImgD.src;
if(image.width>0 && image.height>0)
{
if(image.width/image.height>= FitWidth/FitHeight)
{
if(image.width>FitWidth)
{
ImgD.width=FitWidth;
ImgD.height=(image.height*FitWidth)/image.width;
}
else
{
ImgD.width=image.width;
ImgD.height=image.height;
}
}
else
{
if(image.height>FitHeight)
{
ImgD.height=FitHeight;
ImgD.width=(image.width*FitHeight)/image.height;
}
else
{
ImgD.width=image.width;
ImgD.height=image.height;
}
}
}
}
DrawImage();
</script>
分享到：
相关推荐
在网页设计中，图片的等比例缩放是一个常见的需求，特别是在响应式布局中，为了保持图像的原始比例，避免拉伸或压缩导致变形，我们通常会利用JavaScript来动态调整图片大小。本文将深入探讨如何使用JavaScript实现...
以上就是利用JavaScript实现图片等比例缩放、切换时不失真的基本方法。在实际应用中，你可能需要根据具体需求进行调整，比如处理图片加载状态、优化性能或者增加动画效果等。记住，关键在于计算合适的缩放比例，以及...
- 当图片是背景图时，可以使用CSS3的`background-size: cover`属性来实现等比例缩放。 通过以上方法，你可以使用jQuery轻松实现图片的等比例缩放，无论是在不同分辨率的设备上还是在窗口大小变化时，都能保持良好的...
本文将详细介绍如何利用JavaScript（简称JS）以及jQuery这两种常用前端技术实现图片的等比例缩放。 #### 一、基础知识简介 **1.1 图片等比例缩放的概念** 等比例缩放是指在调整图片大小时保持其原始宽高比不变的...
在编程领域，我们也可以利用各种编程语言实现图片的按比例缩放。例如，Python中的PIL（Pillow）库，Java的JavaFX或Swing库，JavaScript的canvas元素等。这些库或框架提供了丰富的API，可以方便地读取、修改和保存...
在网页设计中，动态的图片展示效果可以提升用户体验，其中一种常见的技术是通过JavaScript实现鼠标滚动时图片等比例缩放。...以上就是利用JavaScript实现鼠标滚动时图片等比例缩放的详细解析，希望对你的项目有所帮助。
在JavaScript中实现图片的缩放功能是一项常见的任务，尤其在网页开发中，为了提供良好的用户体验，用户可能需要查看图片的细节或者节省空间显示概览。本文将深入探讨如何使用JavaScript来实现图片的放大和缩小功能。...
在提供的部分内容中，我们可以通过分析JavaScript脚本来了解等比例缩放的具体实现方法： ```javascript <script language="JavaScript"> <!-- var flag = false; function DrawImage(ImgD) { var image = new Image...
本资源“jQuery实现图片等比例缩放截取显示特效源码.zip”提供了一种利用jQuery实现图片等比例缩放并进行截取显示的特效代码。这个功能在网页设计和开发中非常常见，特别是对于图像展示、相册应用或任何需要对图片...
"js按比例缩放图片且垂直居中显示图片"这个主题涉及到的是使用JavaScript技术来处理图片的尺寸调整和布局定位，使得图片无论在何种分辨率或屏幕尺寸下都能保持良好的视觉效果。这里我们将详细探讨这一技术实现的原理...
在探讨“js图片等比例缩放”的主题时，我们深入解析了如何利用JavaScript来实现图片的等比例缩放，这是一个在网络开发中极为实用且常见的需求。等比例缩放的目的是为了适应不同尺寸的屏幕或布局需求，同时保持图片...
"jQuery图片等比例缩放截取显示代码" 是一种解决图片在不同尺寸屏幕下不失真的技术，它利用jQuery库和一个名为jQThumb的插件实现。这里我们将深入探讨这个技术的工作原理、实现方式以及其优势。 首先，jQuery是一个...
其次，等比例缩放图片是为了保持原始图片的比例，防止拉伸变形。这可以通过计算图片的宽高比来实现。当设定一个目标宽度或高度时，根据比例调整另一个维度，确保两个维度的缩放比例相同。在.NET中，可以使用Bitmap...
总结来说，"js图片缩放效果制作鼠标滚动图片等比例缩放代码"是一个利用JavaScript实现的网页动态效果，通过监听滚动事件、计算缩放比例和应用CSS3动画，使得图片在鼠标滚动时能够平滑、等比例地缩放，提升了网页的...
本文将详细讲解如何利用鼠标来实现图片的移动和缩放，这两个功能在日常工作中极为常见。 首先，我们要理解的是“图片拖动”。在大多数图形应用程序中，用户可以通过按下鼠标左键并移动鼠标来移动图片。这个过程涉及...
下面我们将详细探讨如何使用jQuery实现等比例缩放以及相关的技术点。 首先，我们需要了解CSS中的`transform`属性，特别是`scale()`函数。`scale(x, y)`用于缩放元素，其中`x`是水平方向的缩放因子，`y`是垂直方向的...
"jQuery图片等比例缩放图片左右垂直居中"这个话题聚焦于如何利用jQuery库解决这个问题。jQuery，作为一款强大的JavaScript库，简化了DOM操作、事件处理以及动画效果，使得在网页上实现复杂的功能变得更加简单。 ...
本文介绍了一种通过CSS样式实现图片自动等比例缩放的方法，可以有效解决上述问题。通过简单的CSS代码设置，可以让图片根据页面的实际需求自动调整其宽度和高度，确保图片无论原始尺寸如何，都能以合适的比例展示在...
本篇文章将详细介绍如何利用JavaScript实现按比例缩放图片，以保持其原始比例，确保图片质量不受影响。 首先，我们需要理解图片变形和失真的原因。当一个图片的宽高比（宽度与高度的比例）与显示区域的宽高比不一致...