javascript - 图像尺寸问题

Question

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

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

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

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

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

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

我怎样才能让它工作？

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

谢谢。

Answer 1

尝试用javascript存储每个图像的宽度和高度，然后在循环中对图像应用以下样式:

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