单个方框内图片垂直水平居中和等比例缩小（支持所有浏览器）

　　我们公司站点是展示类站点，用户会上传不同比例、大小的图片。展示时需要将图片统一尺寸且不拉伸居中展示（比如在100*100的div中垂直居中和水平居中）。

　　水平居中很简单，text-align: center即可，但垂直居中比较麻烦vertical-align: middle可不一定有效。网上在这方面的方法有很多，多的我就不说了，下面是自己的一个汇总方案（包括IE下的图片等比例缩小）：

<!doctype html>
<html>
<head>
	<title>图片shui</title>
	<meta name="viewport" content="width=device-width" />
</head>
<body>
	<div>
		<span>
			<img src="http://www.baidu.com/img/baidu_sylogo1.gif" alt="Alternate Text" />
		</span>
	</div>
	<div>
		<span>
			<img src="http://docs.ebdoor.com/Image/ProductImage/0/2219/22198623_1_small.jpg" alt="Alternate Text" /></span>
	</div>
	<script type="text/javascript">
		function scaleImage(img, maxWidth, maxHeight)
		{
			img.style.maxWidth = maxWidth || img.width;
			img.style.maxHeight = maxHeight || img.height;
			if (!img.hasLoadFunc)
			{
				img.hasLoadFunc = true;
				img.attachEvent("onload", function ()
				{
					var t = new Image();
					t.onload = function ()
					{
						img.style.width = img.style.height = "auto";
						var maxWidth = parseInt(img.style.maxWidth);
						var maxHeight = parseFloat(img.style.maxHeight);
						if (this.width > parseInt(img.style.maxWidth) || this.height > maxHeight)
							if (this.width / this.height > maxWidth / maxHeight)
								img.style.width = "";
							else
								img.style.height = "";
					}
					t.src = img.src;
				});
			}
			img.src = img.src;
		}
	</script>
	<style type="text/css">
		div { width: 100px; height: 100px; line-height: 100px; text-align: center; border: 1px solid #ccc; margin: 10px; font-size: 0; }
			div span { _height: 100%; _writing-mode: tb-rl;}
				div span img { max-height: 100px; max-width: 100px; _height: 100px; _width: 100px; vertical-align: middle; _zoom: expression((function (img) { img.style.zoom = "1"; scaleImage(img); })(this)); }
	</style>
</body>
</html>

　　下面具体分析：

在不考虑IE6的情况下可以使用的方案是line-height
```
div { width: 100px; height: 100px; line-height: 100px; text-align: center; font-size: 0; }
	div img { max-height: 100px; max-width: 100px; vertical-align: middle; }
```
这个可以实现图片水平和垂直居中，加个font-size: 0是防止在IE下div可能被撑高的可能。

IE6对于line-height方案是无效的，且不支持max-width和max-height所以使用CSS等比例缩小图片是不可能的了，但可以配合脚本实现。先说IE的垂直居中，如果图片不大于外框时可以使用怪诞以毒攻毒的方式writing-mode: tb-rl，这个表示文本输出方式是从上到下从右到左

div span { _height: 100%; _writing-mode: tb-rl; }

height:100%是必须的。

当图片宽或高大于外框尺寸时我们可以通过脚本的等比例缩小同时实现垂直居中而不使用margin或padding等

function scaleImage(img, maxWidth, maxHeight)
{
	//maxWidth和maxHeight可省，增加这两个参数用于当更改图片尺寸时的垂直居中
	img.style.maxWidth = maxWidth || img.width;
	img.style.maxHeight = maxHeight || img.height;
	//hasLoadFunc参数用于限制图片只有一个用于垂直居中的调整方法
	if (!img.hasLoadFunc)
	{
		img.hasLoadFunc = true;
		//如果图片更改了SRC后再次等比例缩小图片
		img.attachEvent("onload", function ()
		{
			var t = new Image();
			//在不更改图片样式的情况下获得图片的真实尺寸
			t.onload = function ()
			{
				//将图片宽和高设置为自动，因为在模式表中已经将图片的宽和高设为固定值了
				img.style.width = img.style.height = "auto";
				var maxWidth = parseInt(img.style.maxWidth);
				var maxHeight = parseFloat(img.style.maxHeight);
				if (this.width > parseInt(img.style.maxWidth) || this.height > maxHeight)
					//如果图片的宽高比比外框的宽高比大（或者说图片更长些）的时候，宽为固定值，高为自动，否则相反
					if (this.width / this.height > maxWidth / maxHeight)
						img.style.width = "";
					else
						img.style.height = "";
			}
			t.src = img.src;
		});
	}
	//图片已经加载成功时触发load事件
	img.src = img.src;
}

CSS表达式加脚本

div span img { _height: 100px; _width: 100px; _zoom: expression((function (img) { img.style.zoom = "1"; scaleImage(img); })(this)); }

加个宽和高是防止图片加载完后将外框撑开

_zoom: expression((function (img) { img.style.zoom = "1"; scaleImage(img); })(this))

这种写法的css expression只会执行一次，用于css expression优化性能。

　　当然span也可以换成a，div换成li等。当然具体情况具体分析，没有一成不变的代码

posted @ 2012-10-15 15:50 彭伟阅读(2310) 评论(2) 编辑收藏举报

刷新页面返回顶部

彭伟

单个方框内图片垂直水平居中和等比例缩小（支持所有浏览器）

公告