javascript - 如何使图像适合框架，保持纵横比和缩略图列表的中心

Question

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

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

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

Answer 1

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

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

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;
}