zoukankan
html css js c++ java
jQuery实现按比例缩放图片
在网站中通常要显示各种尺寸的图片,但图片的尺寸不一定符合显示的要求。如果直接指定img的width和height属性的话图片又很可能会被挤压的变形。下面这个代码可以把图片放进一个imgBox,并根据imgBox的大小来按比例缩放图片以适应他,同时图片会在imgBox中居中显示。来看代码:
首先是HTML:
Code
1
<!
DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"
>
2
<
html
xmlns
="http://www.w3.org/1999/xhtml"
>
3
<
head
>
4
<
meta
http-equiv
="Content-Type"
content
="text/html; charset=utf-8"
/>
5
<
title
>
按比例自动缩放图片
</
title
>
6
7
<
script
type
="text/javascript"
src
="js/jquery.js"
></
script
>
8
<
script
type
="text/javascript"
src
="js/drawImg"
></
script
>
9
</
head
>
10
11
<
body
>
12
<
div
id
="imgBox"
style
="500px; height:400px; background:#cccccc; overflow:hidden"
>
13
<
img
id
="img1"
alt
=""
src
="images/1.jpg"
onload
="DrawImg(500,400);"
/>
14
</
div
>
15
</
body
>
16
</
html
>
再是JavaScript:
Code
1
function
DrawImg(boxWidth,boxHeight)
2
{
3
var
imgWidth
=
$(
"
#img1
"
).width();
4
var
imgHeight
=
$(
"
#img1
"
).height();
5
//
比较imgBox的长宽比与img的长宽比大小
6
if
((boxWidth
/
boxHeight)>=(imgWidth
/
imgHeight))
7
{
8
//
重新设置img的width和height
9
$(
"
#img1
"
).width((boxHeight
*
imgWidth)
/
imgHeight);
10
$(
"
#img1
"
).height(boxHeight);
11
//
让图片居中显示
12
var
margin
=
(boxWidth
-
$(
"
#img1
"
).width())
/
2;
13
$(
"
#img1
"
).css(
"
margin-left
"
,margin);
14
}
15
else
16
{
17
//
重新设置img的width和height
18
$(
"
#img1
"
).width(boxWidth);
19
$(
"
#img1
"
).height((boxWidth
*
imgHeight)
/
imgWidth);
20
//
让图片居中显示
21
var
margin
=
(boxHeight
-
$(
"
#img1
"
).height())
/
2;
22
$(
"
#img1
"
).css(
"
margin-top
"
,margin);
23
}
24
}
25
查看全文
相关阅读:
设计模式学习--适配器模式
设计模式学习--抽象工厂模式
设计模式学习--观察者模式
设计模式学习--建造者模式
设计模式学习--外观模式
设计模式学习--模板方法模式
Java Web(五) 监听器Listener
Java Web(四) 过滤器Filter
Java Web(三) Servlet会话管理
Java Web(二) Servlet详解
原文地址:https://www.cnblogs.com/tomin/p/1401410.html
最新文章
继承 oc
Self关键字 oc
类方法: oc
方法声明与方法定义 什么时候程序可以运行 oc
封装 set方法 get方法 oc
匿名对象:oc
方法的声明和实现 oc
类的声明和实现 oc
面向对象和面向过程思想 oc
Java内部类
热门文章
RowMapper处理查询结果集
java内部匿名类
文件路径的各种斜杠
spring连接数据库配置
解除system账号锁定
将绿色软件添加到鼠标右键
新起点
设计模式学习--组合模式
UML图详解
设计模式学习--备忘录模式
Copyright © 2011-2022 走看看