如何使图像适合框架，保持纵横比并在缩略图列表中居中

我想将列表缩略图框显示为数据网格。每个缩略图必须放置在具有特定宽度和高度的框架中（为了一致性），如下所示：

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

通过将图像宽度和高度设置为框架，图像会更改为错误的宽高比，并且对于尺寸小于框架的图像，它们会拉伸到框架（我不想影响较小尺寸的图像）。如何在不影响图像纵横比的情况下使图像适合框架内。我的下一个问题是如何将图像设置为框架中心，无论大小如何。我应该用javascript来做这个吗？请帮我

没有JS， 您可以使用max-width/max-height将图像保持在边界内.frame元素。和width:auto; and height:auto图像将保持其原始纵横比，并且不会拉伸超过其原始尺寸。

要将图像在框架中水平和垂直居中，您可以使用：

position:absolute;
top:0; bottom:0;
left:0; right:0;
margin:auto;

DEMO

完整的CSS：

.frame{
    width:300px; height:300px;
    display:inline-block;
    border:1px solid teal;
    position:relative;
}
.frame > img{
    max-width:100%; max-height:100%;
    width:auto; height:auto;
    position:absolute;
    top:0; bottom:0;
    left:0; right:0;
    margin:auto;
}