js图片等比缩放
function DrawImage(ImgD,FitWidth,FitHeight){
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;
}
}
}
}
<img src="XXXX" alt="自动缩放后的效果" onload="javascript:DrawImage(this,"200","200");" />
网上很多等比缩放都用用这样的方式。
其实只要固定img width 和heihgt 中的一个属性就可以了。
<img src="aa.jpg" onload="javascript:if(this.width>500)this.width=500;" />
分享到:
相关推荐
本文将详细介绍如何使用JQuery实现等比缩放图片的插件,并结合提供的`autoImg`文件进行解析。 首先,我们要理解等比缩放的基本原理。等比缩放是指保持图片的长宽比不变,根据指定的容器大小来调整图片的尺寸。在CSS...
"JS图片等比缩放"是一种常见的技术,用于确保图片在不同尺寸的容器中显示时保持其原始比例,避免图像失真或变形。这种技术广泛应用于产品图和缩略图的显示,尤其是在用户需要查看多种尺寸图片的场景下,如电商网站的...
在IT行业中,图片等比缩放展示是一项基本且重要的技术,尤其在网页设计和移动应用开发中至关重要。等比缩放确保了图片在不同尺寸的屏幕或窗口中保持其原始的比例,避免出现图像拉伸或压缩导致失真的情况。本话题主要...
有时候,我们希望图片能够在不同的设备和屏幕尺寸下保持良好的显示比例,这就需要用到等比缩放技术。本文将深入探讨如何使用JavaScript实现图片的等比缩放,确保在火狐、IE、谷歌等主流浏览器中都能正常工作。 首先...
在JavaScript中,对图片进行等比缩放和旋转是常见的图像处理需求,尤其在Web开发中,例如在响应式设计、交互式用户界面或者在线图片编辑应用中。本篇文章将详细探讨如何使用JavaScript来实现这些功能。 首先,我们...
等比缩放图片并保持其原始比例,同时确保图片居中且不发生拉伸,是图像处理中的一个重要环节。这有助于保持图片的质量和视觉效果。下面将详细介绍如何在Go语言中实现这一功能。 首先,我们需要导入`image`和`image/...
在网页设计中,展示图片的方式多种多样,而“JQUERY相册--等比缩放图片大小”就是一个典型的案例,它利用jQuery库实现了一个功能强大的图片相册,具有自动等比例缩放图片的功能,确保无论原始图片尺寸如何,都能在...
在网页设计中,动态的图片展示效果可以提升用户体验,其中一种常见的技术是通过JavaScript实现鼠标滚动时图片等比例缩放。这个技术的核心在于利用JavaScript事件监听和CSS3变换功能,来实现图片随着页面滚动而优雅地...
jquery图片根据自定义横宽像素,对任何图片进行等比缩放,更换img的src图片测试即可。
在PHP方面,通过使用PHP类`ImgSF`中的`make_img`函数来完成图片的等比缩放工作。由于PHP操作的是服务器端资源,函数内部通过拷贝原始图片来创建新资源,并使用GD库中的函数进行缩放处理。这一过程需要对原始图片进行...
在这个场景中,我们看到一个名为`resize_image`的类,该类专门用于处理GIF图像的等比缩放并去除缩放后的黑色背景。 首先,让我们深入了解`resize_image`类的结构和工作原理。类中定义了几个私有属性,如原始图像的...
为了解决这个问题,我们可以使用JavaScript来实现图片的按比例缩放,确保图片始终保持其原始比例,避免变形。下面将详细介绍如何使用JavaScript来实现这一功能,并结合提供的文件进行解析。 首先,我们需要理解图片...
1. **选择元素**:使用jQuery的选择器选取需要处理的图片元素,例如`$("img")`会选取所有的图片元素。 2. **计算比例**:获取图片的原始宽度和高度,然后根据目标容器的尺寸计算出缩放比例。这可以通过`width()`和`...
最近在学习JS的OOP所以写了这么个东西 使用方法: $(“.viewArea img”).zoom({height:74,width:103}); 效果演示: http://demo.jb51.net/html/jquery_img/jquery_img.htm代码: 代码如下: (function($){ $.fn.zoom ...
等比缩放是一种常用的技术,它可以在保证图片比例不变的前提下,对图片的宽度或高度进行缩放。这种技术尤其适用于对图片进行快速预览而不牺牲图片质量的场景。 本篇内容将详细介绍如何使用PHP语言,根据指定的宽度...
图片等比例缩放 (作者:back_crying) 1、先创建一个隐藏的img对象来获取图片的实际尺寸 2、根据限制的大小反复判断,图片能够显示的最大尺寸 3、设置图片尺寸和周围的占位,避免页面变形 4、删除隐藏的img对象 (注:...
1. **选择器**:定义选择要进行缩放操作的图片元素,如`$('img.resizable')`。 2. **计算比例**:根据图片原始尺寸和容器尺寸计算缩放比例,如`var ratio = containerWidth / imgWidth;`。 3. **设置样式**:使用CSS...
在网页设计中,确保图片等比缩放且不超出设定的容器尺寸是非常常见的需求。这里我们探讨的是如何使用纯CSS来实现这一目标,特别是在不支持CSS表达式(IE6不支持)的情况下,仍然能兼容IE7及以上的浏览器。 首先,...
在 JS 中,我们需要使用 JavaScript 来实现图片的等比缩放。我们首先需要获取所有的 `<img>` 元素,并遍历它们。如果图片的宽度或高度超过限制宽度或高度,就需要将其缩放到等比的大小。同时,我们还需要将图片垂直...