Резиновая верстка хаотичных элементов?

Question

[Insom84]

Ребят, переформулировал вопрос. Как сверстать надписи в блоке в разных местах экрана (для инфографики) так, чтобы они при изменении экрана оставались на одном месте? другими словами были резиновыми, как и картинка на их фоне?

Comments

[Rustam Bainazarov]

Хак на padding-bottom для сохранения соотношения сторон. Элементы внутри на процентах и абсолютном позиционировании, а размер шрифтов в vw.

[Insom84]

Рустам Байназаров, я пробовал процентами, съезжают..

[Rustam Bainazarov]

Insom84, плохА пробовали.

[Rustam Bainazarov]

Insom84, код кидайте, покажу.

[Insom84]

div style="position:relative;"
p style="position:absolute; top:20%; right:24%" /p
p style="position:absolute; top:35%; right:44%" /p
/div

ну типа такого я пробовал

[Rustam Bainazarov]

Insom84, я имею в виду разметку. Мне не очень её писать хочется за вас.

[Insom84]

Рустам Байназаров, ну так вот разметка. Или вы о чем?

[dollar]

Insom84, вставляйте код через <code></code>
Редактор простой на этом сайте, даже ребенок найдет нужные кнопки)

[Rustam Bainazarov]

Insom84, ну блин, полную разметку с текстами, которые вам там нужны.

[Insom84]

Рустам Байназаров, так это он и есть, я не делал еще ничего, на этом примере я пойму.

<div style="position:relative;">
<p style="position:absolute; top:20%; right:24%;">1 надпись </p>
<p style="position:absolute; top:35%; right:44%;">2 надпись </p>
</div>

спасибо)

[Insom84]

Рустам Байназаров, Рустам, подскажешь?

[Ankhena]

Insom84, аналогичный вопрос: Как отловить размер изображения и позиционировать на нем объекты?
В комментариях к моему ответу есть примеры кода.

С помощью top:20%; right:24%; вы позиционируете левый верхний угол абзаца. Если нужно, чтобы неизменным оставался центр, то нужен еще обратный transform на половину высоты и ширины. Либо задать размер шрифта в единицах wv.

И сохранение пропорций блока: https://jsfiddle.net/Ankhena/cLhxv7eq/ В примере блок квадратный, вы поставьте нужные пропорции.

[Rustam Bainazarov]

Insom84, да. 15 минут.

[Rustam Bainazarov]

Insom84, написал ответ + хак-фикс, когда окно больше, чем максимальный размер вашего квадрата.
Сюда тоже продублирую, читай комментарии в коде:

[Rustam Bainazarov]

Insom84, ну как, посмотрел?

А то я старался, писал ответ, мне обидно, LOL.

Answer 1

[Rustam Bainazarov]

Вообще, лучше это делать с помощью SVG.

Если нужно на CSS — то вот, но читай комментарии. Там ряд хаков используется. Сжимай окно по ширине, чтобы увидеть, что блоки текста сохраняют свои размеры и позиционирование относительно общего родителя:

Answer 2

[profesor08]

Берешь каждый элемент, у него есть top, left, width, height. Делаешь все фиксированно, затем берешь и пересчитываешь эти значение на проценты относительно родительского контейнера. Как только все задашь, все элементы будут четко масштабировать в зависимости от ширины контейнера, у тебя получится полностью резиновый блок. Останется что-то сделать с шрифтами, привязать размер шрифта к единица vw, она зависит от ширины окна, а с помощью @media ограничишь величину четко в px.

Как закончишь можешь откинуться в кресло и сказать насколько я крут. Я, то есть я, не ты. ))

Comments

[Insom84]

честно говоря понятнее мне не стало.. можно простой пример?

[profesor08]

Insom84, вот, допустим, в макете у твоего контейнера ширина 1000. Один из блоков располагается по top: 50, left: 123. Тебе надо перевести left на проценты. Вот считаешь сколько процентов занимает 123 от 1000 (123 / (1000 / 100) == 12.3). Вот и задаешь left: 12.3%;