专业的西宁网络公司,真诚为您提供优质无忧的西宁网站建设服务! 咨询热线: 0971-8238114
DIV中图片垂直居中以及等比缩放
栏目热点
首页 >>前台技术 >> DIV中图片垂直居中以及等比缩放

DIV中图片垂直居中以及等比缩放

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

.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>

关键词:DIV中图片垂直居中以及等比缩放
作者:亦翔网络 来源:原创 日期:[2010/10/26] 点击次数: