打有‘图片’标签的日志

DIV中图片垂直居中以及等比缩放 (2009-1-3)

类别: Xhtml/Css | 1,381 Views| 一条评论

我想应该有很多朋友都会碰到DIV中图片垂直居中的问题，DIV不像TABLE，直接一个valign就搞定，特别是当图片的大小不确定的时候，无法通过事先定位来解决。而等比缩放的话，IE6中不认 max-height跟max-width。本民工几经摸索加实践，终于找到一种比较简单干净的方法，是从淘宝网上学来的，呵呵。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

.box {
/*非IE的主流浏览器识别的垂直居中的方法*/
display: table-cell;
vertical-align:middle;
/*设置水平居中*/
text-align:center;
/* 针对IE的Hack */
*display: block;
*font-size: 175px;/*这个值大概为最大高度的0.875*/
*font-family:Arial;/*防止非utf-8引起的hack失效问题，如gbk编码*/
width:200px;
height:200px;
border: 1px solid #eee;
}
.box img {
/*设置图片垂直居中*/
vertical-align:middle;
/*非IE6下的等比缩放*/
max-height:150px;
max-width:150px;
/*IE6下的等比缩放，注意expression其实是运行了一个JS程序，所以如果图片很多的话会引起CPU占用率高*/
width:expression(this.width >150 && this.height <= this.width ? 150: true);
height:expression(this.height > 150 && this.width <= this.height ? 150 : true);
}
<div class=”box”>
<img src=”02.jpg” />
</div>

Download:mywork.rar