javascript - 图像尺寸问题

Question

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

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

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

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

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

当我查看 facebook 时，他们在对齐图像和显示图像中心方面做得很好。

我怎样才能让它工作？

请求显示的缩略图大小为 100 像素 x 100 像素

谢谢。

Answer 1

尝试使用 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 演示

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 2

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

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

Answer 3

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

这个使所有的缩略图 100px x 100px