установить ширину изображения серии изображений

Question

установить ширину изображения серии изображений

0

У меня есть следующая проблема: у меня есть контейнер с определенной шириной. В этом контейнере есть серия изображений. Некоторые из них больше, чем контейнеры. Теперь я хочу, чтобы наибольшее изображение составляло 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% и рассчитать разницу, но я не знаю, с чего начать. Любая помощь будет оценена по достоинству.

vincent 14 апр. 2014, в 19:47

Источник

Теги:

jquery

html

image

1 ответ

Ещё вопросы

VVV · Accepted Answer · 2014-04-14T15-29-00.000Z

Ты был почти там! Вы задавали значение% в зависимости от ширины контейнера (как вы упомянули). Поэтому вместо этого примените процент к текущей ширине изображения.

Четвертое изображение (в моем примере) является самым большим. Остальные будут изменять размер в зависимости от размера четвертого изображения.

Вот скрипка.

Вот пример, который проверяет, больше ли наибольшее изображение, чем контейнер.

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