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

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

$（document）.ready（）在呈现DOM时立即运行。图像尚未加载，到目前为止，DOM对它们的唯一信息是img属性。对于容器div来说也是如此，容器div尚未拉伸其高度以容纳图像。这可能就是为什么你每次都得到相同的尺寸。理想情况下，您应手动设置图像的宽度和高度以及容器div。如果您不想这样做，可以使用$（window）.load（）等待加载所有图像并重新呈现DOM，但这是非常明显的。
'left'和'top'仅适用于'position：absolute;'的元素并且在'position：relative;'的容器中。因此，图像必须是绝对的，并且它们之上的div相对于左侧和顶部的工作。

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

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

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

JQuery调整缩略图图像

1 个答案: