jQuery-图片预加载+等比例缩放+图片在容器中上下左右居中！
网站的图片，常常需要按照容器的大小进行等比例缩放（保证图片不失真）， 并同时让图片居中显示（左右居中，上下居中）。实现的代码如下：注意： 需要自己下载一个 jquery的js。 比如我有一个文件放在 【./js/jquery-1.6.2.js】目录下面 按比例自动缩放图片 /// /// 调整图片大
·
网站的图片，常常需要按照容器的大小进行等比例缩放（保证图片不失真）， 并同时让图片居中显示（左右居中，上下居中）。
实现的代码如下：
注意： 需要自己下载一个 jquery的js。 比如我有一个文件放在 【./js/jquery-1.6.2.js】目录下面
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>按比例自动缩放图片</title>
<script src="./js/jquery-1.6.2.js"></script>
<script>
/// <summary>
/// 调整图片大小并居中
/// </summary>
/// <remarks>
/// <param>图片对象</param>
/// <param>容器最大宽度</param>
/// <param>容器最大高度</param>
/// </remarks>
var adjustImgSize = function(img, boxWidth, boxHeight) {
// var imgWidth=img.width();
// var imgHeight=img.height();
// 上面这种取得img的宽度和高度的做法有点儿bug
// src如果由两个大小不一样的图片相互替换时，上面的写法就有问题了，换过之后的图片的宽度和高度始终取得的还是换之前图片的值。
// 解决方法：创建一个新的图片类，并将其src属性设上。
var tempImg = new Image();
tempImg.src = img.attr('src');
var imgWidth=tempImg.width;
var imgHeight=tempImg.height;
//比较imgBox的长宽比与img的长宽比大小
if((boxWidth/boxHeight)>=(imgWidth/imgHeight))
{
//重新设置img的width和height
img.width((boxHeight*imgWidth)/imgHeight);
img.height(boxHeight);
//让图片居中显示
var margin=(boxWidth-img.width())/2;
img.css("margin-left",margin);
}
else
{
//重新设置img的width和height
img.width(boxWidth);
img.height((boxWidth*imgHeight)/imgWidth);
//让图片居中显示
var margin=(boxHeight-img.height())/2;
img.css("margin-top",margin);
}
};
// 本机能的js事件
$(function() {
// 图像加载完成之后，调整图片大小
$('#img1').load(function() {
adjustImgSize($(this), $(this).parent().width(), $(this).parent().height());
});
});
</script>
</head>
<body>
<div id="imgBox" style="width:500px; height:200px; background:#cccccc">
<img id="img1" alt="" src="./image/test.jpg" />
</div>
</body>
</html>
缩放之后效果： （左右居中）
改变 框体大小：
<div id="imgBox" style="width:200px; height:400px; background:#cccccc">运行之后效果（上下居中）：
权威｜前沿｜技术｜干货｜国内首个API全生命周期开发者社区
更多推荐
2
0- 0
已为社区贡献2条内容
所有评论(0)