動的に読み込まれたイメージの比例リサイズと垂直方向と水平方向のセンタリング

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

正確には比例しておらず、本当に中央に位置していません。 質問には、どうすれば比例的にスケールすることができますか？その後、どのように各画像をそのdivに配置することができますか？

ありがとうございました！

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 */ 
}