JS按比例缩放图片
1、JS代码
<script type="text/javascript" language="javascript">
var flag = false;
function DrawImage3(iwidth,iheight,ImgD) {
var image = new Image();
image.src = ImgD.src;
if (image.width > && image.height > ) {
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>
2、前代代码
<img alt='' src="Image/wuqilong.jpg" onload="DrawImage3(200,150,this)" />
JS按比例缩放图片的更多相关文章
- JS等比例缩放图片,限定最大宽度和最大高度
JS等比例缩放图片,限定最大宽度和最大高度 JavaScript //图片按比例缩放 var flag=false; function DrawImage(ImgD,iwidth,iheight){ ...
- 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 ...
随机推荐
- 常用css3属性的ie兼容查看
记录一下关于css3的各种常用属性对ie各版本浏览器的兼容程度: 最低可兼容ie7 最低可兼容ie8 最低可兼容ie9 最低可兼容ie10 position:fixed clip E:first-le ...
- 注册页面-使用form模块搭建
基于Django的form模块,快速的搭建注册页面,每个限制条件,都放在form模块里面,不单独对每一项编写标签,使用模版的 for 循环来渲染. 首先设置form模块 在blogs模块下创建一个bl ...
- 【POJ】1679 The Unique MST
题目链接:http://poj.org/problem?id=1679 题意:给你一组数据,让你判断是否是唯一的最小生成树. 题解:这里用的是kuangbin大佬的次小生成树的模板.直接判断一下次小生 ...
- ARM 汇编 数据处理指令
一. 如何把数据放到寄存器中 1. 数据搬移指令 mov , mvn 1) 指令格式:<opcode><cond>{s} Rd, operand <操作 ...
- docker学习---搭建Docker LAMP环境
1.环境 系统版本:CentOS Linux release 7.4.1708 docker版本:docker-ce-18.09 主机IP:192.168.121.121 2.载入MySQL和PHP镜 ...
- 类 __init__的注意事项
class Dog(): class类 后面的ClassName类名第一个字母一定要大写. def __init__(self,name,age): 注意init前后是英文格式下,前后都是两道 ...
- thymeleaf种处理select,radio和文字回显的问题
select根据后台集合显示下列列表 <select class="form-control" name="parentId" > <opti ...
- Servlet 上传图片
目录 Servlet 上传图片 预备 需求包 pom 前端代码 Servlet 上传图片 预备 需求包 commons-fileupload -用于上传 jstl -用于jsp页面遍历 servlet ...
- bootstrap 基础模板相关信息
<!DOCTYPE html> <html> <head> <title></title> <link rel="style ...
- Typora使用入门
使用sublime编写markdown语法不太方便,使用专门的markdown编辑软件会更方便一些! 1.typora常用快捷键 ctrl + / 切换编辑语法模式/预览模式 ctrl + 1 ...