圖片自動(dòng)等比例縮小，其實(shí)如果不考慮ie6的話，用css就可以實(shí)現(xiàn)，設(shè)定img的max-width和max-height，而<img>標(biāo)簽內(nèi)不設(shè)定widht和height即可。
ie7已經(jīng)支持max-width和max-height，這是為數(shù)不多的好消息之一。但是對于ie6及以前的版本，就只能用js來設(shè)置了。
在ff2.0/ie6/ie7中測試通過。opera8.5 垂直居中未通過。
以下是引用片段：
<!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=gb2312" />
<title>圖片自動(dòng)等比例縮小且垂直居中</title>
<!--[if lte IE 6]>
<script type="text/javascript" language="javascript">
function imgFix() {
//定義要限制的圖片寬高,這個(gè)寬高要同style里面定義的相同，小于限定高寬的圖片不操作
var widthRestriction = 200;
var heightRestriction = 200;
var allElements = document.getElementsByTagName("*")
for (var i = 0; i < allElements.length; i++)
{
if (allElements[i].className.indexOf("imgBox") >= 0)
{
var imgElements = allElements[i].getElementsByTagName("img");
for (var j=0; j < imgElements.length; j++)
{
if ( imgElements[j].width > widthRestriction || imgElements[j].height > heightRestriction )
{
if ( imgElements[j].width > imgElements[j].height)
{
imgElements[j].height = imgElements[j].height*(widthRestriction/imgElements[j].width);
imgElements[j].width = widthRestriction;
} else
{
imgElements[j].width = imgElements[j].width*(heightRestriction/imgElements[j].height);
imgElements[j].height = heightRestriction;
}
}
if ( imgElements[j].height < heightRestriction )
{
imgElements[j].style.paddingTop = ( heightRestriction -imgElements[j].height ) /2 + "px";
}
} /*for j*/
}
}/*for i*/
}
window.onload = imgFix;
</script>
<![endif]-->
<style type="text/css">
<!--
* {
margin:0;
padding:0;
}
.imgBox li {
list-style:none;
width:200px; /* 寬度 */
height:200px; /* 高度 */
background:#ccc;
border:1px solid #666;
text-align:center;
margin:5px;
line-height:200px;
}
.imgBox img {
max-width:200px; /* 寬度 */
max-height:200px; /* 高度 */
vertical-align:middle;
}
-->
</style>
</head>
<body>
<ul class="imgBox">
<li><img src="......" alt="img" /></li>
<li><img src="......" alt="img" /></li>
<li><img src="......" alt="img" /></li>
<li><img src="......" alt="img" /></li>
</ul>
</body>
</html>
###############################################
另一種方法：兼容IE6 7 8 FF等主流瀏覽器 div中圖片垂直居中,圖片自動(dòng)按邊框比例縮放
<!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=gb2312" />
<title>科杰在線www.yeewaa.com</title>
<script language=javascript src="autoImg.js"></script>
</head><body>
<style type="text/css">
.box{
width:200px; height:200px; border: 1px solid #eee;
/**//*非IE的主流瀏覽器識(shí)別的垂直居中的方法*/
display: table-cell;vertical-align:middle;/**//*設(shè)置水平居中*/
text-align:center;/**//* 針對IE的Hack */
*display: block;
*font-size: 175px;/**//*約為高度的0.873，200*0.873 約為175*/
*font-family:Arial;/**//*防止非utf-8引起的hack失效問題，如gbk編碼*/}
.box img{/**//*設(shè)置圖片垂直居中*/vertical-align:middle;}
</style>
<div class="box">
<img src="www.yeewaa.com.jpg" onload="autoimg(this,200,200)" /></div>
</body>
</html>
請將下面綠色文字部分全選存成 autoImg.js文件
// JavaScript Document
function cssX(elem){//直接得到寬度
if(elem.style.width){return elem.style.width;}
if(elem.currentStyle)return elem.currentStyle.width;
if(document.defaultView && document.defaultView.getComputedStyle)
{return document.defaultView.getComputedStyle(elem,"").getPropertyValue("width");}
}
function cssY(elem){//直接得到高度
if(elem.style.height){return elem.style.height;}
if(elem.currentStyle)return elem.currentStyle.height;
if(document.defaultView && document.defaultView.getComputedStyle)
{return document.defaultView.getComputedStyle(elem,"").getPropertyValue("height"); }
}
var resetCSS=function(elem,prop){
var old ={};
for (var i in prop){
old[i] =elem.style[i];
elem.style[i] = prop[i];
}
return old;
}
var restoreCSS=function(elem,prop){
for (var i in prop)
{elem.style[i]=prop[i];}
}
function getWidth(elem){
if(elem.style.display!="none"){
return elem.offsetWidth || parseInt(cssX(elem));
}
var old = resetCSS(elem,{
display: '',
visibility: 'hidden',
position: 'absolute'
});
var w = elem.clientWidth || parseInt(cssX(elem));
restoreCSS(elem,old);
return w;
}
function getHeight(elem){
if(elem.style.display!="none"){
return elem.offsetWidth || parseInt(cssY(elem));
}
var old = resetCSS(elem,{
display: '',
visibility: 'hidden',
position: 'absolute'
});
var w = elem.clientHeight || parseInt(cssY(elem));
restoreCSS(elem,old);
return w;
}
function autoimg(obj,width,height)
{
if(obj==undefined)
{ //得到觸發(fā)事件的元素
var evt= window.event;
var obj = evt.target||evt.srcElement;
}
width=width||getWidth(obj.parentElement); //若不指定寬度則得到其父元素的寬度
height=height||getHeight(obj.parentElement);
myImage = new Image();
myImage.src = obj.src;
if (myImage.width>0 && myImage.height>0)
{
var rate = 1;
if (myImage.width>width || myImage.height>height)
{
if (width/myImage.width<height/myImage.height)
{
rate = width/myImage.width;
}
else
{
rate = height/myImage.height;
}
}
obj.width = myImage.width*rate;
obj.height = myImage.height*rate;
}
}
