图片水平居中兼容IE6、7、8和FF_ie8 图像背景缩放居中-优快云博客

本文介绍了一种实现图片等比缩放及水平居中显示的技术，该方法兼容各种浏览器，通过CSS样式和JavaScript脚本完成布局优化。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>图片等比缩放及水平居中兼容各种浏览器http://bbs.it-home.org/thread-16748-1-1.html</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>
<body>
<div class="box">
<img src="data/attachment/forum/2014pic/95ea49bc830405a6481faed4ba98b1b8.gif" onload="DrawImage(this,200,200);" />
</div>
<hr />
<div class="box">
<img src="data/attachment/forum/2014pic/7f94f4d589c952dd6cc267da2d4cb80e.gif" onload="DrawImage(this,200,200);" />
</div>
</body>

</html>