Question

我有以下问题我有一个具有一定宽度的容器。在那个容器中有一系列图像。有些比容器大，有些则更小。现在我希望最大的图像是容器的80％，并且根据那个最大的图像（仅当它们比容器大）时，需要调整所有其他图像的大小。

这是我迄今为止所尝试过的：

var $pageContainer = $('.pageContainer');
        var canvasWidth = $pageContainer.width();
        var maxWidth = 0;

        $pageContainer.find('img').each(function (index, el) {
            if ($(el).width() > maxWidth) maxWidth = $(el).width();
        });

        var percentage = canvasWidth / maxWidth * 100;

        $pageContainer.find('img').each(function () {
            var $img = $(this);
            var imgWidth = $img.width();

            $img.width(percentage + '%');
        });

Offcourse这不起作用。如果百分比变量为64，则图像刚刚调整为其容器的64％。所以我认为我应该采取最大的图像，将其设置为80％，并计算差异，但我不知道从哪里开始。任何帮助将不胜感激。

Answer 1

你快到了！您根据容器的宽度设置了％值（如您所述）。因此，将百分比应用于当前图像宽度。

第四张图片（在我的例子中）是最大的。其余的将根据第四张图像的大小调整大小。

Here's a fiddle.

Here is an example检查最大图像是否大于容器。

    var $pageContainer = $('.pageContainer');
    var canvasWidth = $pageContainer.width();
    var maxWidth = 0;

    $pageContainer.find('img').each(function (index, el) {
        if ($(el).width() > maxWidth) maxWidth = $(el).width();
    });


    var percentage = canvasWidth / maxWidth;

    $pageContainer.find('img').each(function () {
        var $img = $(this);
        var imgWidth = $img.width();

        $img.width(imgWidth * percentage);
    });

设置一系列图像的图像宽度

1 个答案: