Quero mostrar a caixa de miniaturas da lista como grade de dados. cada imagem em miniatura deve ser colocada no quadro com largura e altura específicas (para consistência) da seguinte maneira:

<div class='frame'>
   <img src='img1.jpg' />
</div>
<div class='frame'>
   <img src='img2.jpg' />
</div>  

Ao definir a largura e a altura da imagem para enquadrar, as imagens mudam para a proporção incorreta e, para uma imagem de tamanho menor que a moldura, elas são esticadas para a moldura (não quero afetar uma imagem de tamanho menor). Como encaixar a imagem no quadro sem afetar a proporção da imagem. minha próxima pergunta é como posso definir a imagem no centro do quadro, independentemente do tamanho. devo fazer isso com javascript? Por favor me ajude