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按比例缩放图片的更多相关文章

  1. JS等比例缩放图片,限定最大宽度和最大高度

    JS等比例缩放图片,限定最大宽度和最大高度 JavaScript //图片按比例缩放 var flag=false; function DrawImage(ImgD,iwidth,iheight){ ...

  2. js同比例缩放图片

    function DrawImage(ImgD, FitWidth, FitHeight) { var image = new Image(); image.src = ImgD.src; if (i ...

  3. JavaScript等比例缩放图片

    js等比例缩放图片,这个功能非常实用,当网页加载一个尺寸比较大的图片时,往往会把一个网页撑的变形,页面变得很难看,于是我们就想到了用JS去控制超出一定范围的图片,以稳定页面布局,本代码段就是完成了此功 ...

  4. JS实现等比例缩放图片

    JS实现等比例缩放图片 2014-01-19 21:57 by 龙恩0707, 40 阅读, 0 评论, 收藏, 编辑 JS实现等比例缩放图片 有时候我们前端页面只有500×500像素的宽和高的布局, ...

  5. PHP按最大宽高等比例缩放图片类

    本来用phpthumb来缩略图片是十分方便的,但是最近在sae上写项目发现phpthumb在sae上保存文件时会出问题,想来实现一个简单的按最大宽高等比例缩放图片类也并不困难,于是便自己写了一个方便修 ...

  6. PHP按最大宽高等比例缩放图片类 http://www.oschina.net/code/snippet_876708_21113

    PHP按最大宽高等比例缩放图片类 http://www.oschina.net/code/snippet_876708_21113 php 等比例缩小图片 http://www.111cn.net/p ...

  7. 【Thumbnailator】java 使用Thumbnailator实现等比例缩放图片,旋转图片等【转载】

    Thumbnailator概述:     Thumbnailator是与Java界面流畅的缩略图生成库.它简化了通过提供一个API允许精细的缩略图生成调整生产从现有的图像文件的缩略图和图像对象的过程, ...

  8. C#等比例缩放图片

    等比例缩放图片(C#) private Bitmap ZoomImage(Bitmap bitmap, int destHeight, int destWidth) { try { System.Dr ...

  9. DTCMS,添加文章时,内容中第一张图片作缩略图,并且等比例缩放图片

    DTCMS,添加文章时,内容中第一张图片作缩略图 admin/article/article_edit.aspx.cs 导入: using System.Drawing;using System.Dr ...

随机推荐

  1. webdriver使用已打开过的chrome

    基本功能: 执行脚本a,打开一个chrome,脚本a执行完成,chrome未关闭. 执行脚本b,继续使用a打开的chrome,不新启浏览器. 附加: 如果已打开的chrome未关闭,则在chrome中 ...

  2. Ubuntu12.04下安装sourcenavigator-NG4.5阅读源代码

    大家知道Windows下有一个很好的查看源代码的软件sourceinsight,使用sourceinsight查看Linux内核代码.嵌入式软件开发中的C语言项目源代码.驱动程序代码很是方便.在Lin ...

  3. ubuntu 搭建嵌入式开发环境tftp的方法

    网上很多安装的时候都要安装tftpd-hpa tftp-hpa xinetd三个安装包,经我测试,xinetd无需安装,安装好前两个后,修改tftpd-hpa的配置文件即可:etc/default/t ...

  4. linux 上挂载硬盘或者读取u盘数据

    查看服务器上有哪些设备 df -hl查询挂载 硬盘后或者插上u盘后sda 的变化,新增的就是我们添加上的. fdisk -ls /dev/sda

  5. qt5.9.1 VS2017 qalgorithms.h

    qt5.9.1只有VS2017 64位支持, 在32位工程下会出现关于qalgorithms.h的错误,参考以下内容修改该头文件解决: https://codereview.qt-project.or ...

  6. md详解和rd详解:一次性创建多个目录和多级子目录

    md 命令: 官方解释: E:\ABC>md /? 创建目录. MKDIR [drive:]path MD [drive:]path 如果命令扩展被启用,MKDIR 会如下改变: 如果需要,MK ...

  7. centos 7 中安装Oracle 12c

    今天有需要在centos 7上安装oracle 12 所以上网查了一下安装流程,原贴转自:https://blog.csdn.net/github_39294367/article/details/7 ...

  8. 本地项目上传github

    (1)github上面新建仓库 (2) 1. git init //初始化仓库 2. git add .(文件name) //添加文件到本地仓库 3. git commit -m "firs ...

  9. Excel如何快速渲染百万级别的数据

    Excel主要经历1.查询2.渲染的方式 关于查询: 不同技术水平的人有不同的解决方案,目前我采用的是 1:多线程查询 2:一个异步后台线程每次查询100条便渲染,采用的“懒加载方式”,这样可以做到实 ...

  10. [Grt]一篇简单概括XML

    一.XML基础 XML主要用途(我认为就这三点): XML 把数据从 HTML 分离 XML 简化数据共享 XML 简化数据传输 XML 语法规则: XML 文档必须有根元素 XML 文档必须有关闭标 ...