Как изменить кординаты для изображения?

Question

[smoln]

Добрый день, помогите советом или примером
Суть такая...
Есть картинка размером 2000px, которая допустим разделена на квадраты, каждый квадрат имеет свои кординаты я их ставлю с помощью transform: translate,эти допустим квадрат 45 имеет кординаты transform: translate(1000px,100px), а квадрат два transform: translate(250px,1000px) от реального размера изображения 2000px, все эти кординаты я уже знаю, я их получаю вместе с ссылкой на картинку и вроде бы все хорошо, когда изображение влезает в блок в полном размере. Но как быть, если размер изображения меняется(нужно вписать в блок), допустим оно стало 1000px, соответственно все кординаты слетели и кординаты квадрата 45 уже меньше должны быть меньше, но я на руках имею все те же, что получил вместе с изображением.
Тут я не знаю как лучше сделать, может кто подскажет?

Answer 1

[Stalker_RED]

Вы хотите пересчитать координаты квадратов пропорционально изменению размера картинки?

Пусть
w1 и h1 ширина и высота исходной картинки
w2 и h2 ширина и высота измененной картинки
тогда координаты квадрата
x = x / (w1 / w2)
y = y / (h1 / h2)

и не забудьте еще пересчитать размеры квадрата.

Comments

[smoln]

Это хорошо, а как мне узнать размеры измененной картинки?

[Stalker_RED]

smoln, вот такое вы хотите? (откройте по ссылке и меняйте размер окна)


Возможно вам больше подойдет svg с фоновой картинкой