Я хочу показать миниатюру списка в виде сетки данных. каждое эскизное изображение должно быть помещено в рамку с определенной шириной и высотой (для согласованности) следующим образом:

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

Устанавливая ширину и высоту изображения в кадр, изображения меняются с неправильным соотношением сторон, а для изображения меньшего размера, чем в кадре, они растягиваются до кадра (я не хочу использовать изображение меньшего размера). Как я могу вписать изображение в кадр, не влияя на соотношение сторон изображения. Мой следующий вопрос, как я могу установить изображение в центр кадра, независимо от размера. я должен сделать это с помощью JavaScript? пожалуйста, помогите мне