За зафиксировать метки на адаптивной картинке?

Question

[Binarix]

Здравствуйте. Есть изображение, которое пропорционально "тянется" в зависимости от ширины браузера. Сверху проставлены метки position: absolute. Получается я могу проставить их правильно только для фиксированного размера изображения, иначе они разъезжаются. Как можно извертеться и сделать, чтобы они хотя бы примерно на своих местах оставались?

Answer 1

[Виталий Инчин ☢]

Значица берем исходный размер изображения, позицию и размеры метки.
И исходя из них определяем сколько процентов составляет...

• Ширина/высота метки от ширины/высоты картинки
  
• Top/Left метки от высоты/ширины картинки
  

Ну и ставим эти значения за место фиксированных.

Ну и пример, куда же без него.

/*--Было--*/
.image{
   width: 800px;
   height: 400px;
}
.metka{
  left: 20px;
  top: 40px;
  width: 10px; 
  height: 10px;
}

/*--Стало--*/
.image{
   width: 100%;
   height: auto;
}
.metka{
  left: 2.5%;
  top: 10%;
  width: 1.25%;
  height: 2.5%;
}

Ну это все предполагает конструкцию:

<div style="position:relative;height:auto;">
   <img class="image">
   <span class="metka"></span>
</div>

Реализация: jsfiddle.net/66o4Lkm8

А вот как вы все это будете переводить - другой вопрос. Тут уже понадобится JS.

Comments

[Binarix]

картинка сжимается по вертикали тоже, а там не работают проценты, видимо jQuery мне в помощь?

[Виталий Инчин ☢]

Binarix: дополнил ответ.

[Binarix]

Виталий, вы гений. Огромное спасибо :)