У меня вопрос:
Я правильно получаю координаты x,y?
Как сделать если x,y равны (0.5, 0.5), то центр картинки будет размещаться в правом верхнем углу синей области?
Если scale = 1, картинка будет занимать всю поверхность синей области.
Если картинка квадратная и scale = 1, то картинка будет по высоте занимать всю синею область, а по ширине вылезать немного за пределы.
Соответственно уменьшая scale картинка будет уменьшаться на синей области, если scale = 0 значит картинку вообще не будет видно, а если 0.5 то картинка = половинка синей области!
Как такое сделать с масштабом?
Вот я набросал свой пример на котором я остановился, и больше ничего в голову не лезет:
<body>
<div id="coords"> </div>
<div id="scale"> </div>
<div id="block">
<div id="joystick">
<div id="mover" style="
background: url(http://img.youtube.com/vi/JMJXvsCLu6s/mqdefault.jpg) 100% 100% no-repeat;
background-size:100% 100%;"></div>
</div>
</div>
</body>
Спасибо!