-
<!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>图片等比缩放及水平居中兼容各种浏览器</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){