JQuery调整缩略图大小

我试图制作一个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并在服务器端执行此任务可能更简单、更好吗？

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

$（文档）.ready（）DOM渲染后立即运行。图像尚未加载，DOM迄今为止关于它们的唯一信息是img属性中的内容。容器div也是如此，它尚未拉伸其高度以容纳图像。这可能就是为什么每次都会得到相同的维度。理想情况下，应该手动设置图像的宽度和高度以及容器div。如果不想这样做，可以使用$（window）.load（），它将等待加载所有图像并重新渲染DOM，但这是显而易见的

“left”和“top”仅适用于“position:absolute；”和“position:relative；”容器中的元素。因此，图像必须是绝对的，并且其上方的div必须是相对的，才能使left和top起作用

我不知道你为什么要用左上角而不是宽度和高度，因为你要制作一个缩略图。另一种方法是计算宽度和高度的最大值，并将其缩小到所需的宽度或高度

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

---

我希望其中的一些解释足够让你找到一个合适的解决方案。

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

$（文档）.ready（）DOM渲染后立即运行。图像尚未加载，DOM迄今为止关于它们的唯一信息是img属性中的内容。容器div也是如此，它尚未拉伸其高度以容纳图像。这可能就是为什么每次都会得到相同的维度。理想情况下，应该手动设置图像的宽度和高度以及容器div。如果不想这样做，可以使用$（window）.load（），它将等待加载所有图像并重新渲染DOM，但这是显而易见的

“left”和“top”仅适用于“position:absolute；”和“position:relative；”容器中的元素。因此，图像必须是绝对的，并且其上方的div必须是相对的，才能使left和top起作用

我不知道你为什么要用左上角而不是宽度和高度，因为你要制作一个缩略图。另一种方法是计算宽度和高度的最大值，并将其缩小到所需的宽度或高度

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

---

我希望其中的一些细节能够让你找到一个合适的解决方案。

但它不会改变任何事情，不是吗？我已经尝试过，我看到的和以前一样。问题是我不知道如何使循环工作正常，因为posLeft和posTop总是有相同的值，并且它们是第一张图像的正确度量。对不起，过去两天我一直很忙，我无法回答你。我尝试了你的想法，效果很好。我想我可以在路上完成，但这还不够。我应该在之前学习更多的javascript。谢谢你的帮助！：）但这不会改变任何事，不是吗？我试过了，我看到的和以前一样。问题是我不知道如何使循环正常工作，因为posLeft和posTop总是具有相同的值，并且它们是第一个图像的正确度量。抱歉，我最近两天一直很忙，无法回答您。我试过你的想法，它奏效了。我想我可以在路上做，但这还不够。我应该先学习一些javascript。谢谢你的帮助！：）