Кол-во img от переменной
 

--

Между строками кода 21, 23, 25 и 27 есть принципиальная разница, что требует даже условий? Тоже самое наблюдается и далее. Разве не так это все описывается без всяких условий одной строкой кода?

sectionYarus1 = price * (2 + 3);

И по идее, не должно быть никаких 2 и 3, а price * (h + v), на что цену то умножаем, на высоту, длину (ширину)? Ну ей богу, ну разве же так можно писать, что в школе элементарной математики не изучали?

По поводу картинки - выбрать можно только фиксированные значения длины/высоты? Если так, значит привязать изображения к площади/периметру, например описав их объектом как и цены - {периметр : имя изображения, периметр : имя изображения, ....}

Да вы правы на счет строк. Исправлюсь)) Чет я фигню накатал. У картинок длина и высота в 100%. Они занимают всю площадь контейнера. И когда их кол-во достигает больше чем места контейнера они уменьшаются, чтобы дать место еще другим. Я думаю сделать их по площади. т.е. площадь = 6 появляется одна картинка. Но как привязать так, чтобы при изменении площади картинки добавлялись и исчезали?

То есть необходимо по выбранным размерам указать изображениям масштаб вывода? Если так, то 100% по длине и высоте должны соответствовать максимально возможным значениям длины и высоты. К примеру по высоте h-max: 2 = 100%, и длине v-max: 3 = 100%. Тогда в зависимости от выбора изображение должно отображаться в масштабе:

100 * (h / h-max) + "%" и 100 * (v / v-max) + "%"

Или наоборот, если надо изменять масштаб в другую сторону (чем больше размер, тем меньше масштаб), 100% соответствует минимальным размерам.

Хотя не по площади думаю мне как то не понятно. Что если сделать просто
при длине 3 и высоте 2 появляется картинка далее я прибавляю длину появляется еще одна картинка и т.д. Не зависимо от масштаба, потому что я думаю как только они заполнять контейнер они сами начнут уменьшаться. Что мне прописать, чтобы они появлялись зависимо от длины и высоты. У меня сейчас стоит

di.onload = function () {
                imgContainer.appendChild(di);  // кидаем в контейнер картинку
            };

он добавляет картинку при change input но не зависит от значения длины и высоты, как его привязать к значению?Благодарю за помощь.

Понятия не имею, мне не ведомо что там за картинки и как они связаны с данными. Я изначально предполагал, что они связаны с площадью, причем отношение сторон не играет роли. То есть проблема была как связать картинки с данными. А оказывается, что проблема в масштабировании. А если так, то лучшее решение именно расчет масштаба, который легко привязать к сторонам как было показано, либо к количеству их в родительской области и т.п.

Нет вы все правильно поняли. Проблема в привязке к данным. С масштабированием я вроде как сделаю. Мне важно то, чтобы при значение длины 3 и высоты 2 появлялась картинка, пока что ее масштаб не важен, главное, чтобы она появлялась при этих значениях. То есть когда i(длина) = 3 h(высота)=2 показывается одна картинка. если i=6 появляется еще такая же картинка и т.д. Мне сейчас нужно, чтобы они у меня не появлялись просто из за нажатия input, а появлялись при значении длины. Как будто длина 3 это появление 1 картинки. Что нужно использовать, чтобы appendChild сработал столько раз сколько будет указано?

Ну так свяжите имена изображений или свойства объекта, в котором описаны эти имена, с набором возможных значений, как конкатенация значений двух сторон. То есть например, по высоте можно набрать: 1, 2, 3, а по длине 1, 2, 3, 4. Значит комбинация имен будет: 11.jpg, 12.jpg, 13.jpg, 14.jpg, 21.jpg, 22.jpg, ... А если в объекте, то например:

{"1" : {"1" : "name", "2" : "name", "3" : "name", "3" : "name"},
 "2" : {"1" : "name", ....

Но если это разные изображения, а не требования размеров. В противном случае не выгодно, нет гибкости и лучше масштаб вычислять или векторный формат, если позволяет содержание.

Спасибо вам за помощь. Это тоже вариант, но вариант для разных картинок он тоже будет нужен мне при накладывании картинок на картинки. А сейчас я не могу его использовать так как здесь есть предел. Если я наберу длину 1000, тогда мне нужно писать код до 1000, а если я наберу еще больше. Тогда он будет оч огромный. А нужно, чтобы он брал одну картинку(в папке находится только одна картинка), и выводил ее по значению длины или даже можно по шагу. Например у меня стоит

<input type="number" value="" placeholder="Длина, м" step="3" name="i" min="3" max="" required>

и вот 1 шаг = 3. Сейчас когда я прибавляю длину он выдает картинку даже 2 почему то, я думаю это пропадет когда я привяжу ее к длине. И вот как привязать то ее к длине. Типа img appendChild и вот он отталкивается от значения длины, понимая сколько раз выводить картинку.

Мне трудно о чем либо судить, общая картина неизвестна, что там добавляется как связано, какие проблемы... Не думаю, что ввод значений может быть каким угодно, то есть есть ограничения. Если проблемы с числом изображений размещаемых ,назовем это шкалой, на шкале, то она должна быть равна максимуму. А максимум можно делить на введенное значение, узнавая количество, либо управлять масштабом, либо растягивать изображение, ну и векторный формат.

Я не могу сказать ничего конкретного, по причине указанной выше.