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 ...
随机推荐
- node.js 中的 fs (文件)模块
记录 fs 模块的方法及使用 1. fs.stat 获取文件大小,创建时间等信息 // 引入 fs 模块 const fs = require('fs'); fs.stat('01.fs.js', ( ...
- kafka原理概念提炼
Kafka Kafka是最初由Linkedin公司开发,是一个分布式.支持分区的(partition).多副本的(replica),基于zookeeper协调的分布式消息系统,它的最大的特性就是可以实 ...
- UI自动化ADB出现devices offline的解决方法
终端运行如下命令即可解决: adb kill-server adb start-server adb remount
- springboot1.5.x升级到2.1.x切换分支导致的maven依赖混乱
背景:项目springboot版本由1.5.X升级到2.1.X,两个版本的分支需要共存,来回切换的时候,maven依赖各种报红 查看dependency发现1.5.X的jar和2.1.X的jar都存在 ...
- 【洛谷】P1247取火柴游戏
题目链接:https://www.luogu.org/problemnew/show/P1247 题意:nim取石子的题意,多了一个判断先手赢的话,输出先手第一把怎么拿,以及拿完之后每堆还剩多少. 题 ...
- Mybatis Generator 安装(idea+maven)
1.在Intellij IDEA创建maven项目(本过程比较简单,略) 2. 在maven项目的pom.xml 添加mybatis-generator-maven-plugin 插件 <bui ...
- nginx防DDOS、cc、爬虫攻击
一.防止DDOS.CC攻击 http { limit_conn_zone $binary_remote_addr zone=perip:10m; limit_conn_zone $server_nam ...
- shell脚本输出空心等腰三角形
第一种:(for循环) #!/bin/bash#空心等腰三角形arr=9 #定义金字塔的层数for ((i=1;i<=$arr;i++))do for ((j=1;j<=$(($arr-$ ...
- BCZM : 1.15
数独 解法一:广度优先搜索. 解法二:先填满中间矩阵,其他区域通过矩阵置换求出.
- Spring Boot学习笔记一
Spring Boot简介 前言:本章简单介绍Spring boot的使用. (第二天springboot的学习之路:https://www.cnblogs.com/LBJLAKERS/p/12003 ...