Как я могу разместить изображения (их различное количество) относительно друг друга, а также масштабировать jumbotron, в котором они находятся, соответственно? Django

Question

Я хотел попросить вас о помощи. Я боролся с этим довольно долго, но я не мог придумать хорошие решения. Это мой первый проект в Django и HTML / CSS / js, поэтому я заранее сожалею: P

Я создал два изображения, которые помогут мне объяснить мою проблему:

В этом случае у меня есть три изображения, PNG с альфа. Фактическое изображение в красном "I-1". Более темная граница - фактический размер изображения. По умолчанию они, конечно, складываются так. А желтый - это другое.

Когда я помещаю их в эфир по положению или относительно, это выглядит так:

И это Также вполне логично, почему это происходит. Это своего рода то, чего я хочу достичь. Но есть две / три проблемы:

1.1 - Другие вещи для веб-сайта очень плохие, это выглядит странно, и мне это не нравится.

1.2 - Мой jumbotron также растянут вниз.

2 - у меня разное количество изображений в разных случаях. Иногда их 3, а иногда 5. И каждый из них мне нужно разместить немного по-другому. Для меня это большая проблема.

Мне удалось создать их три типа, когда первый (1) и последний (5) всегда одинаковы, поэтому это круто, но 2, 3 и 4 в посередине нужно немного другое положение.

Я новичок в Django, CSS и HTML, поэтому, если честно, я даже не знаю, как мне это гуглить. Буду очень признателен за любую помощь и советы.

Спасибо и ура!

Answer 1

Я искал inte rnet и экспериментировал некоторое время. И сейчас мое лучшее решение - css «масштаб».

Я выбрал, например:

#head {
     scale: 3.5;
     z-index: 5;
}

И оно работает довольно хорошо! Сначала я добавляю небольшие изображения (например, 100 пикселей), а затем увеличиваю их до CSS. Таким образом, они хорошо выровнены и не занимают много места под ними. Увеличивая мои «I-1», «I-2» и т. Д. 1012 *. из моих примеров рядом друг с другом, и они не занимают места вокруг них.

Это, конечно, не очень элегантное решение, но оно работает:)