Пропорциональное изменение размера динамически загружаемых изображений и их центрирование по вертикали и по горизонтали

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> 

Это СМЧ:

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