Отзывчивые изображения с анимацией jQuery

Question

Я создаю анимацию jquery, которая накладывает воздушный шар на карту. Воздушный шар должен «взлетать» и «приземлиться» в определенных точках.

Мне нужно сделать его отзывчивым, и вот в чем проблема: как сделать точки самонастраивающимися в зависимости от размера карты? (для того, чтобы изображение карты было отзывчивым, я использую bootstrap класс img-responsive) Мне также нужно будет реагировать на изменение размера шара, но я уже имею в виду, что для этого мне нужно использовать CSS Media Types.

Кто-нибудь знает какую-либо библиотеку, которая уже делает это или имеет представление?

---

Код: http://jsfiddle.net/52VtD/3350/

Answer 1

На основе isherwood ответ я нашел способ:

http://jsfiddle.net/w2XdZ/6/

Answer 2

Устанавливая свои очки, как проценты удалить размер изображения в качестве фактора.

jsfiddle.net/isherwood/w2XdZ

// Fix Balloon Initial Position 
$("#balloon").css({ 
    top: '50%', 
    left: '50%', 
    position: 'absolute' 
});