JAVASCRIPT 等比例缩放图片 限定最大宽度和最大高度
在Web上显示图片,通常都会有图片显示比例问题,如果不给<img />限制width和height,那么如果图片大了就会将整个页面挤乱,图片小了又会使图片失真。
1、预先定义好图片显示的标准宽度和高度。
2、如果图片的大小超过了标准定义,那么等比例压缩图片。
3、如果图片的大小等于标准定义,那么按照标准宽度和高度显示图片。
4、如果图片的大小小于标准定义,那么不对图片进行任何压缩处理。
![](/assets/blank.gif)
<script language="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;}} } </script> 调用: <img src="data:images/toplogo.gif" οnlοad="javascript:DrawImage(this,100,100)">
![](/assets/blank.gif)
转:http://www.verydemo.com/demo_c98_i16948.html
转载于:https://www.cnblogs.com/yiwd/archive/2013/06/08/3126685.html
JAVASCRIPT 等比例缩放图片 限定最大宽度和最大高度相关推荐
- javascript等比例缩放图片的实现代码
<!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <meta name ...
- JavaScript,等比例缩放图片的函数,很好用。
在Web上显示图片,通常都会有图片显示比例问题,如果不给<img />限制width和height,那么如果图片大了就会将整个页面挤乱,图片小了又会使图片失真. 我的需求如下: ...
- python 等比例缩放图片 自写
Python等比例缩放图片 使用了 OpenCV 进行图片的读取 输入:利用 cv2.imread 函数读取的 Mat 矩阵 输出:缩放后的 Mat 矩阵(示例代码为缩放到 512x512 大小,也可 ...
- java实现按比例缩放图片技巧
java实现按比例缩放图片技巧 案例需求: 根据指定的文件名称,用户给定的缩放比例来完成缩放图片 思路分析: 1.文件对象File 2.BufferedImage构造器: 图像数据的访问的缓冲器 3. ...
- Java 等比例缩放图片
/*** 等比率缩放* @param imgsrc 原图片路径* @param imgdist 缩放图片路径* @param widthdist 指定缩放宽度*/ public static void ...
- JS实现等比例缩放图片
JS实现等比例缩放图片 有时候我们前端页面只有500×500像素的宽和高的布局,但是后台返回的数据图片是1000×1000,那么这种情况下 如果我直接返回的话 那么图片肯定有一部分没有显示出来,在这种 ...
- python调整屏幕缩放比例_python实现批量按比例缩放图片效果
本文实例为大家分享了python实现批量按比例缩放图片的具体代码,供大家参考,具体内容如下 把脚本文件放在要缩放的文件夹下面. 双击运行脚本,输入要缩放的系数.脚本会在当前目录下创建一个scaledI ...
- [原创] 图片操作的类(ImageLibrary)-按比例缩放图片
[原创] 图片操作的类(ImageLibrary)-按比例缩放图片 http://www.vjsdn.com/bbs/bbsTopicDetails.aspx?pid=241 转载于:https:// ...
- 等比例缩放图片并填充图片为正方形(python附代码)
等比例缩放图片并填充图片为正方形 看实现的效果 代码 看实现的效果 之前的 836x662 之后的 300x300 且图片中的塔克斯居中 代码 import os import cv2 import ...
最新文章
- 员工执行力差怎么办?任正非说,抓住这12条,3天打造狼性团队
- Swift实战-豆瓣电台(六)视图跳转,传参及回跳
- tomcat7.0 安装启动之后localhost:8080页面进不去,提示错误500
- [English20091217]英语口语444句
- 【转】计算机中浮点数的表示
- 讲真,做Python一定不要只会一个方向!
- uefi多linux系统启动盘,DIY制作无需格BIOS+UEFI双启动U盘工具|支持syslinux+grub+boomgr+grub2多启动...
- Junit内部解密之三: 单元测试用例运行的全过程
- E - Counting Cliques HDU - 5952
- 计算机网络中的高层应用,第四章计算机网络中的高层应用-.ppt
- 作者:冷芳玲(1978-),女,博士,东北大学计算机科学系讲师
- salt实现lamp自动化部署
- kali安装步骤失败 选择并安装软件_【完全手册】3dmax2020软件下载和安装步骤教程@模渲大师技术部...
- xulrunner弹出窗口不显示解决方法
- 一些技术大牛的博客集锦(转)
- java+整合handwrite_解决java.lang.UnsatisfiedLinkError: JNI_ERR returned from JNI_OnLoad
- 初中生计算机课考试方案,信息技术中考备考方案
- 史上最搞笑的程序员段子,有图有真相!
- 《企业应用架构模式》30天阅读计划
- 为什么我要用GoEasy替代WebSocket
热门文章
- 计算机应用 winxp,2017年职称计算机考试模块WindowsXP试题
- 达梦数据库查询数据库所有表名_达梦数据库的一些实用小SQL
- JavaScript学习随记——Function
- c++ vector学习
- 转载 | pymysql.err.InterfaceError: (0, ‘‘)解决办法
- VMware14.0 安装 CentOS7.2
- TensorFlow的可训练变量和自动求导机制
- Java文件类boolean canExecute()方法(带示例)
- rocksdb原理_教你玩转MyRocks/RocksDB—STATISTICS与后台线程篇
- 242. 有效的字母异位词 golang