JS等比例缩放图片,限定最大宽度和最大高度
JavaScript
//图片按比例缩放
var flag=false;
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;
}
}
}
html
<img src="images/toplogo.gif" onload="javascript:DrawImage(this,100,100)">
JS等比例缩放图片,限定最大宽度和最大高度的更多相关文章
- JS按比例缩放图片
1.JS代码 <script type="text/javascript" language="javascript"> var flag = fa ...
- js同比例缩放图片
function DrawImage(ImgD, FitWidth, FitHeight) { var image = new Image(); image.src = ImgD.src; if (i ...
- JavaScript等比例缩放图片
js等比例缩放图片,这个功能非常实用,当网页加载一个尺寸比较大的图片时,往往会把一个网页撑的变形,页面变得很难看,于是我们就想到了用JS去控制超出一定范围的图片,以稳定页面布局,本代码段就是完成了此功 ...
- JS实现等比例缩放图片
JS实现等比例缩放图片 2014-01-19 21:57 by 龙恩0707, 40 阅读, 0 评论, 收藏, 编辑 JS实现等比例缩放图片 有时候我们前端页面只有500×500像素的宽和高的布局, ...
- PHP按最大宽高等比例缩放图片类
本来用phpthumb来缩略图片是十分方便的,但是最近在sae上写项目发现phpthumb在sae上保存文件时会出问题,想来实现一个简单的按最大宽高等比例缩放图片类也并不困难,于是便自己写了一个方便修 ...
- PHP按最大宽高等比例缩放图片类 http://www.oschina.net/code/snippet_876708_21113
PHP按最大宽高等比例缩放图片类 http://www.oschina.net/code/snippet_876708_21113 php 等比例缩小图片 http://www.111cn.net/p ...
- 【Thumbnailator】java 使用Thumbnailator实现等比例缩放图片,旋转图片等【转载】
Thumbnailator概述: Thumbnailator是与Java界面流畅的缩略图生成库.它简化了通过提供一个API允许精细的缩略图生成调整生产从现有的图像文件的缩略图和图像对象的过程, ...
- C#等比例缩放图片
等比例缩放图片(C#) private Bitmap ZoomImage(Bitmap bitmap, int destHeight, int destWidth) { try { System.Dr ...
- DTCMS,添加文章时,内容中第一张图片作缩略图,并且等比例缩放图片
DTCMS,添加文章时,内容中第一张图片作缩略图 admin/article/article_edit.aspx.cs 导入: using System.Drawing;using System.Dr ...
随机推荐
- 【BZOJ4872】[Shoi2017]分手是祝愿 数学+期望DP
[BZOJ4872][Shoi2017]分手是祝愿 Description Zeit und Raum trennen dich und mich. 时空将你我分开.B 君在玩一个游戏,这个游戏由 n ...
- datatables如何把列设置成hidden隐藏域?
官网:https://datatables.net/reference/option/设置: visible: false如下: <!DOCTYPE html><html>&l ...
- web测试点--摘录
转载地址:Web测试到底是在测什么 一.输入框 1.字符型输入框: (1)字符型输入框:英文全角.英文半角.数字.空或者空格.特殊字符“~!@#¥%……&*?[]{}”特别要注意单引号和&am ...
- kafka Detailed Replication Design V3
参考,https://cwiki.apache.org/confluence/display/KAFKA/kafka+Detailed+Replication+Design+V3 Major chan ...
- python学习笔记(二)— 元组(tuple)
Python 的元组与列表类似,不同之处在于元组的元素不能修改:元组使用小括号,列表使用方括号. 元组创建很简单,只需要在括号中添加元素,并使用逗号隔开即可: tup1 = ('a', 'b', 19 ...
- 剑指Offer——求1+2+3+...+n
题目描述: 求1+2+3+...+n,要求不能使用乘除法.for.while.if.else.switch.case等关键字及条件判断语句(A?B:C). 分析: 递归实现. 代码: class So ...
- POJ1330Nearest Common Ancestors最近公共祖先LCA问题
用的离线算法Tarjan 该算法的详细解释请戳 http://www.cnblogs.com/Findxiaoxun/p/3428516.html 做这个题的时候,直接把1470的代码copy过来,改 ...
- 年假小 Plan
Learn 董伟明 课程 https://www.pycourses.com/ Learn 500 Lines or Less https://github.com/HT524/500LineorLe ...
- socket编程之obj压缩加密传输
因为需要序列化这个对象以便在网络上传输.所以POJO必需要实现java.io.Serializable接口.使用了 ObjectInputStream和ObjectOutputStream来接收和发送 ...
- JavaWeb-HttpServletResponse对象一
web服务器收到客户端的http请求,会针对每一次请求,分别创建一个用于代表请求的request对象,和代表响应的response对象.resquest和response对象既然代表请求和响应,那么要 ...