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
查看全文
相关阅读:
PHP+shell实现多线程的方法
【JavaScript】一个同步于本地时间的动态时间
void 0 或者 undefined
Android Activity间动画跳转
如何申请微信公众平台接口測试帐号
hdu 4862 KM算法 最小K路径覆盖的模型
【Unity 3D】学习笔记三十三:游戏元素——天空盒子
cocos2d-x-lua基础系列教程五(lua单例)
技术走向管理一些思考(7)-激励成员
Runtime.getRuntime().exec()----记录日志案例
原文地址:https://www.cnblogs.com/tomin/p/1401410.html
最新文章
Ubuntu13.04使用Jlink和ST-Link V2烧写STM32F1x和STM32F4x
简单的刚開始学习的人配置Android SDK+ADT+Eclipse
Linux 内核 usb_control_msg 接口
Linux 内核usb_bulk_msg 接口
Linux 内核usb_bulk_msg 接口
Linux 内核提交和控制一个 urb
Linux 内核提交和控制一个 urb
Linux 内核探测和去连接的细节
Linux 内核探测和去连接的细节
Linux 内核注册一个 USB 驱动
热门文章
Linux 内核驱动支持什么设备
Linux 内核取消 urb
(六十九)使用block进行消息传递
用jquery制作一个简单的导航栏
House Robber
EHCache 在WEB项目的使用方法
[Android] 通过Menu实现图片怀旧、浮雕、模糊、光照和素描效果
我的Android进阶之旅------>Android关于Activity管理的一个简单封装
Visual Prolog 的 Web 专家系统 (1)
The server has either erred or is incapable of performing the requested operation. (HTTP 500)
Copyright © 2011-2022 走看看