图片水平居中兼容IE6、7、8和FF代码,Css代码库,德仔网

代码语言

代码分类

【Css】图片水平居中兼容IE6、7、8和FF

作者:Dezai.CN / 发布于2011/11/22/ 717

<div><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "<a href="http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd</a>">
<html xmlns="<a href="http://www.w3.org/1999/xhtml">http://www.w3.org/1999/xhtml</a>">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>图片等比缩放及水平居中兼容各种浏览器</title>
<style type="text/css">
.box {
display: table-cell;
vertical-align:middle;
text-align:center;
*display: block;
*font-size: 175px;/*高度/字体大小的比值为1.14*/
*font-family:Arial;
width:200px;
height:200px;
border: 1px solid #ccc;
padding:3px;
overflow:hidden; /*防止用js缩放时出现不及时*/
}
.box img{
vertical-align:middle; border:0;
}
</style>
<script language="javascript">
var flag=false;
function DrawImage(ImgD,w,h){
var image=new Image();
image.src=ImgD.src;
if(image.width>0 && image.height>0){
flag=true;
if(image.width/image.height>= w/h){
if(image.width>w){
 ImgD.width=w;
 ImgD.height=(image.height*w)/image.width;
}else{
 ImgD.width=image.width;
 ImgD.height=image.height;
}
}else{
if(image.height>h){
 ImgD.height=h;
 ImgD.width=(image.width*h)/image.height;
}else{
 ImgD.width=image.width;
 ImgD.height=image.height;
}
}
}
}
</script>
</head></div>
<div><body></div>
<div><div class="box">
<img src="<a href="http://img.bbs.163.com/new/20111012/photo/go/gogo911@vip.163.com/95ea49bc830405a6481faed4ba98b1b8.jpg">http://img.bbs.163.com/new/20111012/photo/go/gogo911@vip.163.com/95ea49bc830405a6481faed4ba98b1b8.jpg</a>" onload="DrawImage(this,200,200);" />
</div></div>
<div><hr /></div>
<div><div class="box">
<img src="<a href="http://img.bbs.163.com/new/20111012/photo/go/gogo911@vip.163.com/7f94f4d589c952dd6cc267da2d4cb80e.jpg">http://img.bbs.163.com/new/20111012/photo/go/gogo911@vip.163.com/7f94f4d589c952dd6cc267da2d4cb80e.jpg</a>" onload="DrawImage(this,200,200);" />
</div></div>
<div></body>
</html>
</div>

评论列表

本站所提供的代码，版权归原作者所有，若有侵犯作者版权，请与我们联系，我们将立即删除或修改。谢谢!
本站所有代码发布及提供者。

试试其它关键字

　图片水平居中　

同语言下

可能有用的

Dezai.CN贡献的其它代码(4037)