如何在缩略图列表中保持图像的纵横比和中心

Question

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

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

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

Answer 1

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

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

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

演示

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

Answer 2

为了保持纵横比，不能同时调整框架的宽度和高度。您可以将图像的最大宽度或最大高度值设置为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>

CSS:

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

Javascript：

$("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);
});

看看我的样品：
debughttp://jsfiddle.net/7LLh14wL/3/（溢出：可见）
finalhttp://jsfiddle.net/7LLh14wL/4/（溢出：隐藏）

Answer 3

您应该只设置宽度或高度，而不是同时设置两者，这将保持比例。

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

但是，您需要JS来居中显示较大的图像。

Answer 4

使用这个片段

JS-

$(".frame").each( function(){
                var imageUrl = $(this).find('img').attr("src");;
                $(this).css('background-image', 'url(' + imageUrl + ')');
                $(this).find('img').css("visiblity","hidden");
            });

Css

.frame{
     background-size:cover;
     background-position:50% 50%;
     }