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图片根据自定义横宽像素,对任何图片进行等比缩放,更换img的src图片测试即可。
最近在学习JS的OOP所以写了这么个东西 使用方法: $(“.viewArea img”).zoom({height:74,width:103}); 效果演示: http://demo.jb51.net/html/jquery_img/jquery_img.htm代码: 代码如下: (function($){ $.fn.zoom ...
图片等比例缩放 (作者:back_crying) 1、先创建一个隐藏的img对象来获取图片的实际尺寸 2、根据限制的大小反复判断,图片能够显示的最大尺寸 3、设置图片尺寸和周围的占位,避免页面变形 4、删除隐藏的img对象 (注:...
//原图像宽度 private $o_img_height;//原图像高度 private $n_img_width;//新图像宽度 private $n_img_height;//新图像高度 private $o_img_file;//原图像文件 private $o_img_source;//原图像资源 private $...
基于jquery的图片尺寸调整... $(‘#product_list img’).each(function() { var maxWidth = 120; var maxHeight = 120; var ratio = 0; var width = $(this).width(); var height = $(this).height();
在项目开发中,经常会听到 UI 说,这个地方的图片要等比缩放充满这个框显示,要是多了就裁剪显示。
如下所示: def shrinkImage(self): ''' 缩小图片 :return: ''' scale = 0.8 #每次缩小20% img = QImage(self.path) #创建图片实例 ... pixImg = QPixmap.fromImage(img.scaled(size, Qt.IgnoreAspectRatio))
好使的图片等比例缩放js 应用方法<img src"img" onload="javascript:resizeimg(this,width,height)" />
通过文章给出的源代码可实现针对图片的等比缩放生成缩略图的功能,非常实用的技巧哦。 新建文件index.php,需要在统计目录下有个图片为pic.jpg(可根据源码进行更改图片的名称) 源代码如下: <?php $filename=...
等比缩放图片 2. 图片居中显示 3. 有加载的loading过渡 4. 有缩略图的 Carsousel 效果,其实这些特首都是一个标准的相册都应该有的。这个效果的难点主要是图片的过渡loading需要使用图片的load事件。而...
/// 生成缩略图的方式("HW",制定高宽缩放||"W"指定宽,高按比例缩放||"H"指定高,宽按比例缩放||"Cut"指定高宽裁减(不变形)||"DB"等比缩放(不变形,如果高大按高,宽大按宽缩放) ||"Y"按原图大小输出) ...
图片源与需要的大小: 复制代码 代码如下: $src_img = “wallpaper.jpg”; $dst_w = 300; $dst_h = 200; 剪裁图像,保证图像区域最大化显示,并按比例缩放到指定大小。一开始采用了 imagecopyresized 方法进行图像...
典型特征:多级类别,多语言版,会员发布,扩展模块,模板显示,内容存文件,FCK编辑器,使用缓存技术,utf-8编码,水印开关,图片认证码,图片等比缩放,权限测试,js分页程序,js繁体转化 。 贴心ASP系统安装提示...
ex:img,table 注意:大部分行内元素不能修改 span,a,i,u,b,s 3.溢出处理 当内容多,元素区域小的时候,会产生溢出的效果,默认都是纵向溢出 属性:overflow,overflow-x,overflow-y 取值: 1.visible 可见的...