主要用js來重新計算圖片的大小，

window.onload=function(){
        changeImgSize();
    }
    function changeImgSize(){
        var getContainer=document.getElementById('imgcontainer');//父元素div
var getIMG=getContainer.getElementsByTagName('img')[0];
        var fw=getContainer.offsetWidth-(2*getContainer.clientLeft);
        var 
 
fh=getContainer.offsetHeight-(2*getContainer.clientTop);
        var iw=getIMG.width;
        var ih=getIMG.height;
        var m=iw/fw;//圖片與父元素寬度比
var n=ih/fh;//圖片與父元素高度比
if(m>=1&&n<=1)//圖片比父元素寬 或者圖片比父元素短
{
//            iw=Math.ceil(iw/m);
//            ih=Math.ceil(ih/m);
//            getIMG.width=iw;
 
//            getIMG.height=ih;
iw=Math.ceil(iw/n);
            ih=Math.ceil(ih/n);
            getIMG.width=iw;
            getIMG.height=ih;
        }
        else if(m<=1&&n>=1)//圖片比父元素窄 或者圖片比父元素高
{
            iw=Math.ceil(iw/m);
            ih=Math.ceil(ih/m);
            getIMG.width=iw;
            getIMG
 
.height=ih;
        }
        else if(m>=1&&n>=1)
        {

            getMAX=Math.min(m,n);
            iw=Math.ceil(iw/getMAX);
            ih=Math.ceil(ih/getMAX);
            getIMG.width=iw;
            getIMG.height=ih;
        }
//        if(getIMG.height<fh)
//        {
//            var getDistance=Math.floor((fh-getIMG.height)/2);
         //   getIMG.style.marginTop=getDistance.toString()+"px";
var getDistance;
        var getDistance2;
        if(fh>getIMG.height){
            getDistance=Math.floor((fh-getIMG.height)/2);
            getIMG.style.marginTop=getDistance.toString()+"px";
        }else {
            getDistance=Math.floor((getIMG.height-fh)/2);
            getIMG.style.marginTop="-"+getDistance.toString()+"px";
        }

        if(fw>getIMG.width){
            getDistance2=Math.floor((fw-getIMG.width)/2);
            getIMG.style.marginLeft=getDistance2.toString()+"px";
        }else {
            getDistance2=Math.floor((getIMG.width-fw)/2);
            getIMG.style.marginLeft="-"+getDistance2.toString()+"px";
        }

    }

html中：

<div class="sy_pic" id="imgcontainer"><img src="${contextPath}/content/images/logo_02.png" /></div>

css樣式：

.sy_pic{
    width:200px;
    height:300px;
    text-align:center;
    overflow: hidden;
    border:#000 solid 5px;
}