Javascript 如何在缩略图列表中保持纵横比和中心，使图像与帧匹配

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

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

---

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

为了保持纵横比，您无法在框架中同时调整宽度和高度。您可以将图像的“最大宽度”或“最大高度”值设置为100%以适合帧。试试我的代码。我在我的项目中使用这种方法。我使用“包裹”和“内部”来获得框架中的边框和填充。 不需要javascript来拟合图像。但你们必须用它来将你们的图像居中，因为每个图像的宽度和高度都是动态的。我的样本集图像的最大宽度，以适应帧。 HTML:

<div class='wrap'>
    <div class='inner'>
    <img src='http://www.pacificrimmovie.net/wp-content/uploads/Pacific-Rim-Movie-Striker-Eureka-Australian-Jaeger.jpg' />
    </div>
</div>

.wrap{
    padding:10px;
    border: 1px solid #777;
    width: 150px;
    height: 100px;
    overflow:hidden;
    float:left;
    margin: 0px 20px 20px 0px;
}
.inner{
    width: 100%;
    height: 100%;
    overflow:hidden;
    text-align:center;
    position:relative;
}
.inner img{
    max-width: 100%;
    position:absolute;
    left:0;top:0;    
}

$("img").each(function(){
    var top_dif= ($(this).height()-$(this).parent().height())/2;
    var left_dif= ($(this).width()-$(this).parent().width())/2;
$(this).css("top",-top_dif);
$(this).css("left",-left_dif);
});

Javascript:

<div class='wrap'>
    <div class='inner'>
    <img src='http://www.pacificrimmovie.net/wp-content/uploads/Pacific-Rim-Movie-Striker-Eureka-Australian-Jaeger.jpg' />
    </div>
</div>

.wrap{
    padding:10px;
    border: 1px solid #777;
    width: 150px;
    height: 100px;
    overflow:hidden;
    float:left;
    margin: 0px 20px 20px 0px;
}
.inner{
    width: 100%;
    height: 100%;
    overflow:hidden;
    text-align:center;
    position:relative;
}
.inner img{
    max-width: 100%;
    position:absolute;
    left:0;top:0;    
}

$("img").each(function(){
    var top_dif= ($(this).height()-$(this).parent().height())/2;
    var left_dif= ($(this).width()-$(this).parent().width())/2;
$(this).css("top",-top_dif);
$(this).css("left",-left_dif);
});

看看我的样品：

debug

（溢出：可见）

---

final

（溢出：隐藏）

您应该只设置宽度或高度，而不是两者，它将保持比率

使用最大宽度和最大高度将有助于较小的图像

但是，您需要JS将较大的图像居中。

使用此片段

JS

Css

---

如果没有JS，您可以使用

max width/max height

将图像保留在

.frame

元素的边界中。宽度

时：自动

和

height:auto

图像将保持其原始纵横比，并且不会超出其原始大小

要使图像在帧中水平和垂直居中，可以使用：

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

完整CSS：

---

框架是否有固定的高度/宽度？它们是百分比吗？它们是否有特定的纵横比？tumbnail是否有任何方向（portait或横向）？我将使用背景图像属性而不是图像，在那里您可以使用背景大小属性来包含，背景位置为中心。这可能会有所帮助：@web tiki，是的帧具有固定的高度/宽度（而不是百分比）。两者都有可能。我的意思是有些图片是肖像画，samy可能会看到风景画。它很管用，但我想知道，如果没有js，我怎么能得到@Mioonion Rai的答案的输出，我能实现吗？我的意思是，对于宽度或高度大于框架大小的图像，我希望将宽度设置为100%，并垂直隐藏图像的额外部分，并将其垂直居中？不，我不希望图像的高度大于框架，以便垂直适合，优先，我希望水平适合并隐藏溢出。Thanks@CredionMois您可以添加

最大高度：100%：还没有！查看第二张图像，其高度不应设置为垂直适合，而应设置为水平适合并隐藏（顶部和底部溢出）。无论如何，如果没有js，你的结果对我非常有用，提前谢谢。@CredionMois啊，对不起，我误解了，我应该建议
max width:100%而不是
最大高度：100%你的结果是我想要做的，但是我想知道没有jquery它能做什么，请解释我。没有js你做不到，除非你能得到图像宽度与帧宽度之差的初始化值。但是，如果你想在没有js的情况下实现这一点，如果你的项目不是静态站点，你可以尝试借助服务器端代码（如php），也就是说，你可以用php获得图像的大小，计算左值和顶值，并简单地将它们回显到css值。但这不是一个好的方法，因为服务器将加载不必要的负担，并且您必须在每个图像中指定内联css样式代码。