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 ...
随机推荐
- spring data jpa 遇到的问题
org.springframework.core.convert.ConversionFailedException: Failed to convert from type [java.lang.O ...
- Webpack4.x 入门
概览 新建项目 npm init -y 安装webpack & webpack-cli (c)npm install -D webpack (c)npm install -D webpack- ...
- js Ajax 跨域请求
一.使用jsonp的方式(只支持get请求) 二.使用cors的方式(支持HTTP的大部分请求方式) 三.apache的转发(修改服务器配置) 没有试验,暂时不详细写!
- 剑指Offer——按之字形顺序打印二叉树
题目描述: 请实现一个函数按照之字形打印二叉树,即第一行按照从左到右的顺序打印,第二层按照从右至左的顺序打印,第三行按照从左到右的顺序打印,其他行以此类推. 分析: 我们都知道二叉树的层次遍历用的是队 ...
- opencv 角点检测+相机标定+去畸变+重投影误差计算
https://blog.csdn.net/u010128736/article/details/52875137 https://blog.csdn.net/h532600610/article/d ...
- 【使用时发生的意外】file is not sufficiently replicated yet
异常堆栈如下: -- ::, ERROR [com.ultrapower.secsight.util.HdfsUtil] - 追加写入文件失败! org.apache.hadoop.ipc.Remot ...
- SQL Server 排名函数
个函数进行的解释. 以下是对这4个函数的解释: RANK() 返回结果集的分区内每行的排名.行的排名是相关行之前的排名数加一. 假设两个或多个行与一个排名关联,则每一个关联行将得到同样的排名. 比如, ...
- Unity3D优化技巧系列七
笔者介绍:姜雪伟,IT公司技术合伙人.IT高级讲师,CSDN社区专家,特邀编辑.畅销书作者,国家专利发明人;已出版书籍:<手把手教你架构3D游戏引擎>电子工业出版社和<Unity3D ...
- SSH三大框架的搭建整合(struts2+spring+hibernate)
本文转载自:https://blog.csdn.net/kyle0349/article/details/51751913
- PAT 1120 Friend Numbers[简单]
1120 Friend Numbers (20 分) Two integers are called "friend numbers" if they share the same ...