<html>
<head>
<SCRIPT LANGUAGE="JavaScript">
<!--
//图片按比例缩放
//注意：此事件必须使用img中的onload调用，不然会出现获取不到图片宽高的情况
var flag=false;
/**
* ImgD 图片对象
* iwidth 图片要缩放的宽度
* iheight 图片要缩放的高度
*/
function DrawImage(ImgD,iwidth,iheight){
var image=new Image();
image.src=ImgD.src;
if(image.width>0 && image.height>0){
flag=true;
if(image.width/image.height>= iwidth/iheight){
if(image.width>iwidth){
ImgD.width=iwidth;
ImgD.height=(image.height*iwidth)/image.width;
}else{
ImgD.width=image.width;
ImgD.height=image.height;
}
ImgD.alt=image.width+"×"+image.height;
}
else{
if(image.height>iheight){
ImgD.height=iheight;
ImgD.width=(image.width*iheight)/image.height;
}else{
ImgD.width=image.width;
ImgD.height=image.height;
}
ImgD.alt=image.width+"×"+image.height;
}
}
}
//-->
</script>
</head>
<body>
<div id="tablist1" >
调用：<img src="123.jpg" onload="javascript:DrawImage(this,300,200)" />
</div>
</body>
</html>
分享到：
相关推荐
4. 使用计算出的比例缩放图片的宽度和高度。 5. 设置图片的CSS样式，如`width: 新宽度`和`height: 新高度`，以及可能的`max-width`和`max-height`限制，以防止图片超出容器范围。 在实际应用中，我们可以创建一个...
在IT行业中，图片等比缩放展示是一项基本且重要的技术，尤其在网页设计和移动应用开发中至关重要。等比缩放确保了图片在不同尺寸的屏幕或窗口中保持其原始的比例，避免出现图像拉伸或压缩导致失真的情况。本话题主要...
本文将详细介绍如何使用JQuery实现等比缩放图片的插件，并结合提供的`autoImg`文件进行解析。 首先，我们要理解等比缩放的基本原理。等比缩放是指保持图片的长宽比不变，根据指定的容器大小来调整图片的尺寸。在CSS...
在JavaScript中，对图片进行等比缩放和旋转是常见的图像处理需求，尤其在Web开发中，例如在响应式设计、交互式用户界面或者在线图片编辑应用中。本篇文章将详细探讨如何使用JavaScript来实现这些功能。 首先，我们...
本文将深入探讨如何使用JavaScript实现图片的等比缩放，确保在火狐、IE、谷歌等主流浏览器中都能正常工作。 首先，我们要明白等比缩放的基本原理。等比缩放意味着图片的宽度和高度按相同的比例进行缩放，以保持其...
在网页设计中，动态的图片展示效果可以提升用户体验，其中一种常见的技术是通过JavaScript实现鼠标滚动时图片等比例缩放。这个技术的核心在于利用JavaScript事件监听和CSS3变换功能，来实现图片随着页面滚动而优雅地...
综上所述，图片打水印和等比缩放是图像处理中的两个重要环节，它们在版权保护、内容展示以及用户体验等方面发挥着关键作用。无论是文字水印还是图片水印，或者是等比缩放的技巧，都需要结合具体应用场景灵活运用，...
在网页设计中，展示图片的方式多种多样，而“JQUERY相册--等比缩放图片大小”就是一个典型的案例，它利用jQuery库实现了一个功能强大的图片相册，具有自动等比例缩放图片的功能，确保无论原始图片尺寸如何，都能在...
为了解决这个问题，我们可以使用JavaScript来实现图片的按比例缩放，确保图片始终保持其原始比例，避免变形。下面将详细介绍如何使用JavaScript来实现这一功能，并结合提供的文件进行解析。 首先，我们需要理解图片...
jQuery作为一款强大的JavaScript库，提供了丰富的功能来处理DOM操作、事件处理、动画以及Ajax交互，同时也包含了许多第三方插件，用于扩展其功能，其中就包括图片处理。 首先，我们需要理解等比例缩放的概念。等...
总之，这个jQuery图片比例缩放插件通过JavaScript实现了图片的动态调整，保证了图片在不同尺寸的屏幕上都能保持合适的比例，提升了网页的视觉效果和用户体验。了解并掌握这类插件的使用方法，对于前端开发者来说是...
而等比缩放图片时，如果直接使用CSS的transform属性来缩放图片，JavaScript代码将变得更加简洁和高效，因为现代浏览器对CSS的硬件加速支持很好，这也可以减轻JavaScript引擎的负担。 在处理图片时，开发者还需要...
本文将详细解析如何使用 JavaScript 实现等比例缩放图片，以控制其超出预设范围。 首先，我们来看一段实现这一功能的 JavaScript 代码： ```html 等比例缩放图片 function DrawImage(ImgD, iwidth, iheight)...
关于图片等比例缩放，不会导致严重失真，也是一个老生常谈的问题，最好的方法是在服务器端生成缩略图，不要在客户端规定其大小。 如果要在浏览器中缩放，其实现在最近的浏览器都做了比较好的优化，不至于严重失真，...
JavaScript 学习笔记之一jQuery写法图片等比缩放以及预加载 以前对于JavaScript总是在用到的时候在页面上写几个函数，基本没考虑到函数的封装与重用，最近有个项目可能对于这方面要求有点高，所以就研究了下类似...
等比缩放图片是指在图片尺寸变化时，保持图片的宽度和高度的比例不变。在许多应用场景中，为了保证图片在不同分辨率和尺寸的显示设备上能够完整显示，同时又不扭曲图片，需要进行等比缩放。 知识点三：图片的等比...
在 JS 中，我们需要使用 JavaScript 来实现图片的等比缩放。我们首先需要获取所有的 `<img>` 元素，并遍历它们。如果图片的宽度或高度超过限制宽度或高度，就需要将其缩放到等比的大小。同时，我们还需要将图片垂直...
这个方法可以应用于任何需要等比缩放图片的场景。 在实际应用中，我们还需要考虑图片加载完成后再进行缩放，因此可能需要监听`load`事件。例如： ```javascript document.getElementById('myImage')....