JQuery 调整缩略图大小

Question

我正在尝试制作一个 JQuery 脚本来更改投资组合中某些图像的大小。有些图像水平较大，有些图像垂直较大，所以我的想法只是将中心部分显示为缩略图。如果你点击它，你可以看到真实的图像（用外部滑块好吗？）

所以我做的小脚本如下：

$(document).ready(function(){

    var w_div = $('#portfolio div').width();
    var h_div = $('#portfolio div').height();

    $('#portfolio div a img').each(function() {

        /* Correction estimate: div.width - photo.width / 2 */
        var posLeft = -(w_div - $(this).width())  / 2;
        var posTop  = -(h_div - $(this).height()) / 2;

        /* Assignment of new measures to the current image */
        $(this).css({left: posLeft+'px', top: posTop+'px'});

    });

});

通过循环，我尝试获取 img 组并对其进行迭代以计算正确的中心位置。但我不知道为什么它只适用于第一张图片。我的意思是，这个脚本只对第一个图像使用正确的度量来更改所有图像的 css。为什么 posLeft 和 posTop 的分配没有改变？没看懂……

（我忘了说每张图片在css文件上都有'position:relative'语句好吗？

谢谢！

编辑：使用 PHP 并在服务器端执行此任务会更容易和更好吗？

Answer 1

我读得太快了。所以我正在大量编辑我的答案。

1. $(document).ready() 在 DOM 渲染后立即运行。图像尚未加载，到目前为止 DOM 拥有的关于它们的唯一信息是 img 属性中的内容。容器 div 也是如此，它尚未拉伸其高度以容纳图像。这可能就是为什么您每次都获得相同尺寸的原因。理想情况下，您应该手动设置图像的宽度和高度以及容器 div。如果你不想这样做，你可以使用 $(window).load() 来等待所有图像加载并重新渲染 DOM，但这很明显。

2. 'left' 和 'top' 仅适用于 'position: absolute;' 的元素并在带有“位置：相对；”的容器内。所以图像需要是绝对的，并且它们上方的 div 是相对的，这样 left 和 top 才能工作。

3. 我不确定您为什么要使用 left 和 top 而不是 width 和 height，因为您正在尝试制作缩略图。另一种方法是计算宽度和高度的最大值并将其缩小到所需的宽度或高度。

   var max_width = 20; var max_height = 20;
   $('#portfolio div a img').each(function() {
       var w = $(this).width();
       var h = $(this).height();
       var scale = null;
       if (w >= h) { if (w > max_width) { scale = 1 / (w / max_width); } } 
       else { if (h > max_height) { scale = 1 / (h / max_height); } }
       if (scale) {
           $(this).width(w * scale);
           $(this).height(h * scale);
       }
   });
   

我希望其中的一些内容足以让您找到正确的解决方案。