Question

我为图像竞赛编写了一个应用程序，我现在想要实现的是显示这些图像。我面临一个小问题。

通过保持纵横比，我将图像的大小调整为400像素×400像素。这意味着一个图像可以是400px宽度和200px高度。另一个图像可以是100px宽度和400px高度。

客户端应用程序希望在具有固定高度和宽度的网格中显示它们。

http://jsfiddle.net/tbedf/1/

有这个css技巧可以显示部分图像，但是当我这样做时，有些只显示图像的左角，在该区域只能是白色或黑色，这对我没有好处。

当我看到facebook时，他们可以很好地对齐图像并显示它的中心。

我怎样才能使这个工作？

要求显示的缩略图大小为100px×100px

感谢。

Answer 1

为什么不将它们对齐到中心并使用类似的东西隐藏溢出？

<div style="overflow:hidden;text-align:center;width:100px;height:100px;>
<img src="">
</div>

Answer 2

尝试使用javascript存储每个图像的width和height，然后将以下样式应用于循环中的图像：

position: absolute;
top: 50%;
margin-top: -1*($height/2); /* $height = stored height of current image */
right: 50%;
margin-right: -1*($width/2);  /* $width = stored width of current image */

在li申请position: relative;

我为你做了jQuery演示 - jsFiddle demo

jQuery代码：

$(function() {
    var imgs = $('ul > li img');

    $.each(imgs, function(i, img) {
        /* cache variable for better performance */
        var $img = $(img);
        $img.css({
            'margin-top': $img.height()/-2,
            'margin-left': $img.width()/-2
        });     
    });
});

<强> CSS：

li {
    float: left;
    height: 100px;
    width: 100px;
    overflow: hidden;
    margin: 10px;
    padding: 10px;
    position: relative;
}

li:hover { overflow: visible; }

li img {
    position: absolute;
    display: block;
    top: 50%;
    left: 50%;
}

Answer 3

li { float:left; height:100px; overflow:hidden; margin:10px; padding:10px 10 0;}
li:hover { height:auto; }

这个缩略图100px到100px

图像尺寸问题

3 个答案:

我为你做了jQuery演示 - jsFiddle demo