zoukankan
html css js c++ java
JavaScript,等比例缩放图片的函数,很好用。
在Web上显示图片,通常都会有图片显示比例问题,如果不给<img />限制width和height,那么如果图片大了就会将整个页面挤乱,图片小了又会使图片失真。
我的需求如下:
1、预先定义好图片显示的标准宽度和高度。
2、如果图片的大小超过了标准定义,那么等比例压缩图片。
3、如果图片的大小等于标准定义,那么按照标准宽度和高度显示图片。
4、如果图片的大小小于标准定义,那么不对图片进行任何压缩处理。
可能是我搜索的关键字不对吧,在网上找了很长时间,才找到,感觉很好使。代码如下
<
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
=
"
images/toplogo.gif
"
onload
=
"
javascript:DrawImage(this,100,100)
"
>
查看全文
相关阅读:
Pandas入门之十一:窗口函数
Pandas入门之十:百分比与相关性
Pandas入门之九:数据选择
Pandas入门之八:字符串与文本数据
Pandas入门之七:迭代
Pandas入门之六:重建索引
Pandas入门之五:自定义元素处理函数
Pandas入门之四:统计描述
Pandas入门之三:DataFrame
Pandas入门之 二:Series
原文地址:https://www.cnblogs.com/kingeric/p/609476.html
最新文章
解决mvc中js赋值后台数据 换行造成异常
C# 面试问答
C#网络编程一:C#网络编程常用特性
一些学习的网址和资料
C#多线程
c#基于TCP/IP、CIP协议的欧姆龙PLC通信
【C#上位机】西门子1200PLC实用定位控制程序案例
基于EtherNet/IP实现欧姆龙NX系列PLC通信
C# Winform DataGrid 绑定List<> Or ObservableCollection<> 类型无法自动刷新问题
查询电脑所有连接过的密码(值得收藏)
热门文章
我的第一个博客
AutoMapper 10.0使用教程
码农多年后的个人总结,干货满满,入口甘甜~
WebServices 与 Web API 的区别
SignalR
.net core Wpf中使用cefsharp加载本地html网页,并且cefsharp支持any cpu
.NET5 它来了!微软大一统时代来临!
通俗易懂,什么是.NET/.NET Framework/.NET Core/.Net Standard?
WPF mvvm 验证,耗时两天的解决方案
WPF Selector、SelectIndex、SelectedValue、SelectedValuePath、SelectedItem这几兄弟你分的清楚嘛?
Copyright © 2011-2022 走看看