Адаптивная привязка текста к изображению

@lookinside · Регистрация: 11.01.2016

Студворк — интернет-сервис помощи студентам

Есть изображение, и к нему с помощью позиционирования привязаны несколько div'ов с текстом внутри, вот так:

HTML5
1
2
3
4
5
<div class="img-container">
   <div class="img-tip">Кнопка для редактирования</div>
   <div class="img-tip">Кнопка для удаления</div>
   <img src="~/img/image.png">
</div>

При этом img-container имеет position: relative, img-tip - position: absolute. Сами блоки img-tip должны находиться у определенных точек изображения, и с помощью изменения значений top и right их можно спокойно подвинуть так, как мне надо, но когда меняешь размер окна браузера, картинка в контейнере img-container меняет размер (она резиновая), и блоки img-tip несколько смещаются.

Если ли возможность привязки блоков img-tip к конкретной точке изображения, а не через позиционирование? Причем чтобы при изменении размеров окна блоки снова находили эту точку на изображении и вставали рядом с ней.

@boilzzz · 30.05.2016, 18:22

lookinside, css код пожалуйста приложите.

@monochromer · 30.05.2016, 18:57

задавать в координаты в %

@CTapu4ok · 30.05.2016, 18:57

Это имелось в виду?
https://jsfiddle.net/roman_sid/6mp05s7h/

@lookinside · 31.05.2016, 12:21 **[ТС]**

boilzzz, вот наглядней то, что я пытаюсь сделать: https://jsfiddle.net/caafdkm7/ (код немного отличается от представленного в шапке, картинку решено было сделать фоном родительского контейнера). Есть у меня картинка, рядом с крестами должны быть подписи. Если менять размеры окна браузера, подписи меняют положение относительно крестов. Можно ли зафиксировать их положение относительно определенной области на картинке и чтобы при масштабировании подписи позиционировались относительно этих областей?

monochromer, к сожалению, что в пикселях, что в процентах - результат один и тот же.

CTapu4ok, не могу оценить ваше решение - при изменении размеров окна браузера цветные квадраты схлопываются и выравниваются по верхнему краю контейнера:

@CTapu4ok · 31.05.2016, 12:32

Попробуй это посмотреть.
https://jsfiddle.net/roman_sid/6mp05s7h/1/

@lookinside · 31.05.2016, 12:50 **[ТС]**

CTapu4ok, да, теперь вижу. Именно то, что нужно! Спасибо, буду изучать ваш код)

Новые блоги и статьи Все статьи Все блоги /
SDL3 для Web (WebAssembly): Работа со звуком через SDL3_mixer 8Observer8 08.02.2026 Содержание блога Пошагово создадим проект для загрузки звукового файла и воспроизведения звука с помощью библиотеки SDL3_mixer. Звук будет воспроизводиться по клику мышки по холсту на Desktop и по. . .	SDL3 для Web (WebAssembly): Основы отладки веб-приложений на SDL3 по USB и Wi-Fi, запущенных в браузере мобильных устройств 8Observer8 07.02.2026 Содержание блога Браузер Chrome имеет средства для отладки мобильных веб-приложений по USB. В этой пошаговой инструкции ограничимся работой с консолью. Вывод в консоль - это часть процесса. . .	SDL3 для Web (WebAssembly): Обработчик клика мыши в браузере ПК и касания экрана в браузере на мобильном устройстве 8Observer8 02.02.2026 Содержание блога Для начала пошагово создадим рабочий пример для подготовки к экспериментам в браузере ПК и в браузере мобильного устройства. Потом напишем обработчик клика мыши и обработчик. . .	Философия технологии iceja 01.02.2026 На мой взгляд у человека в технических проектах остается роль генерального директора. Все остальное нейронки делают уже лучше человека. Они не могут нести предпринимательские риски, не могут. . .
SDL3 для Web (WebAssembly): Вывод текста со шрифтом TTF с помощью SDL3_ttf 8Observer8 01.02.2026 Содержание блога В этой пошаговой инструкции создадим с нуля веб-приложение, которое выводит текст в окне браузера. Запустим на Android на локальном сервере. Загрузим Release на бесплатный. . .	SDL3 для Web (WebAssembly): Сборка C/C++ проекта из консоли 8Observer8 30.01.2026 Содержание блога Если вы откроете примеры для начинающих на официальном репозитории SDL3 в папке: examples, то вы увидите, что все примеры используют следующие четыре обязательные функции, а. . .	SDL3 для Web (WebAssembly): Установка Emscripten SDK (emsdk) и CMake для сборки C и C++ приложений в Wasm 8Observer8 30.01.2026 Содержание блога Для того чтобы скачать Emscripten SDK (emsdk) необходимо сначало скачать и уставить Git: Install for Windows. Следуйте стандартной процедуре установки Git через установщик. . . .	SDL3 для Android: Подключение Box2D v3, физика и отрисовка коллайдеров 8Observer8 29.01.2026 Содержание блога Box2D - это библиотека для 2D физики для анимаций и игр. С её помощью можно определять были ли коллизии между конкретными объектами. Версия v3 была полностью переписана на Си, в. . .

@boilzzz Богатый духовно 455 / 262 / 145 Регистрация: 10.03.2015 Сообщений: 1,057
	30.05.2016, 18:22
	lookinside, css код пожалуйста приложите. 0

@monochromer 419 / 381 / 163 Регистрация: 03.01.2013 Сообщений: 966
	30.05.2016, 18:57
	задавать в координаты в % 0

@CTapu4ok 53 / 12 / 4 Регистрация: 20.05.2014 Сообщений: 47
	30.05.2016, 18:57
	Это имелось в виду? https://jsfiddle.net/roman_sid/6mp05s7h/ 0

@lookinside 0 / 0 / 1 Регистрация: 11.01.2016 Сообщений: 14
	31.05.2016, 12:21 [ТС]
	boilzzz, вот наглядней то, что я пытаюсь сделать: https://jsfiddle.net/caafdkm7/ (код немного отличается от представленного в шапке, картинку решено было сделать фоном родительского контейнера). Есть у меня картинка, рядом с крестами должны быть подписи. Если менять размеры окна браузера, подписи меняют положение относительно крестов. Можно ли зафиксировать их положение относительно определенной области на картинке и чтобы при масштабировании подписи позиционировались относительно этих областей? monochromer, к сожалению, что в пикселях, что в процентах - результат один и тот же. CTapu4ok, не могу оценить ваше решение - при изменении размеров окна браузера цветные квадраты схлопываются и выравниваются по верхнему краю контейнера: 0

@CTapu4ok 53 / 12 / 4 Регистрация: 20.05.2014 Сообщений: 47
	31.05.2016, 12:32
	Сообщение было отмечено lookinside как решение Решение Попробуй это посмотреть. https://jsfiddle.net/roman_sid/6mp05s7h/1/ 1

@lookinside 0 / 0 / 1 Регистрация: 11.01.2016 Сообщений: 14
	31.05.2016, 12:50 [ТС]
	CTapu4ok, да, теперь вижу. Именно то, что нужно! Спасибо, буду изучать ваш код) 0

Адаптивная привязка текста к изображению

Решение