Question

我有几个动态加载的图像，宽度和高度被设置在代码中。显然它不会按比例扩展它们。这是我用代码加载动态图像：

$(function(){ 
    $.getJSON("inc/API.php", {command:"top3"}, function(result) { 
     for(var i = 0; i<result.length; i++) { 
      $("<div id='top3imgContainer'><a href='images/" + result[i].imageFileName + "' rel='shadowbox[top3]' title='" 
       + result[i].imageHeader + "'><img width='220' height='220' src='images/" + result[i].imageFileName + "' id='top3img' /></a></div>").appendTo("#divTop3"); 
     } Shadowbox.init({ 
       continuous:true, 
       displayCounter:false, 
       overlayColor:"#a09e92", 
       overlayOpacity:0.8 
      }); 
    }); 
}); 

的HTML：

<div id="divContent"> 
    <div id="divTop3"> 
    </div> 
</div> 

这是的CSS：

#divContent { 
width:860px; 
border: 1px solid; 
border-color: #dbd9ca; 
border-radius: 10px; 
-moz-border-radius: 10px; 
margin:5px; 
margin-top:20px; 
margin-bottom:20px; 
padding:5px; 
clear:both; 
margin-bottom:20px; 
} 

#divTop3 { 
width:850; 
text-align:center; 
position:relative; 
} 

#top3imgContainer { 
width:245px; 
height:270px; 
background-image:url(../images_ui/frame.png); 
background-repeat:no-repeat; 
display:inline-block; 
margin: 0 15px 0 15px; 
} 

img#top3img { 
border-radius: 10px; 
-moz-border-radius: 10px; 
margin-left:13px; 
margin-right:20px; 
margin-top:17px; 
} 

和应用后这是CSS的外观： http://i44.tinypic.com/168x7i9.jpg

不是完全正比，也不是真正居中。 所以问题是 - 我怎样才能按比例调整它们呢？之后 - 我怎样才能在每个图像的中心？

谢谢！

Answer 1

我这样做：http://jsfiddle.net/ydZJk/

主要的变化是这些：

#top3imgContainer { 
    width:  100px; 
    height:  120px; 
    line-height: 120px; 
} 

img { 
    vertical-align: middle; 
    max-width: 100px; /* check in all browsers! */ 
    max-height: 120px; /* Old IEs won't like it */ 
}