How to resize an image and keep the map coordinates when the container uses text-align: center #58

Closed
xzuttz opened this Issue May 14, 2012 · 8 comments

Comments

Projects
None yet
2 participants

xzuttz commented May 14, 2012

Hello

My site consists of 1 image. The image is centered using text-align: center; on the parent div.

I am using this code, to resize the image according to the browser size:

http://jsfiddle.net/JpgYm/8/

The problem is that when im using text-align: center on the parent div, the coordinates are off a bit to the left after resizing.

Is there a way to solve this?

http://img20.imageshack.us/img20/4413/skulljy.jpg

Owner

jamietre commented May 14, 2012

Can you set up a jsfiddle example? I can't think of any reason text-align would affect the coordinate map, I can't reproduce it with a simple case.

xzuttz commented May 14, 2012

Thanks for the quick reply

Here you go:

http://jsfiddle.net/F6XFv/2/

Owner

jamietre commented May 14, 2012

Looks like resize is not resizing the wrapper, definitely a bug. I should be able to fix this today or tomorrow.

xzuttz commented May 14, 2012

Im not sure what is causing the problem, but Inspecting the element shows that the canvas has the correct size, but is not moved to the center.

Sounds great, thanks!

jamietre pushed a commit that referenced this issue May 17, 2012

@jamietre jamietre closed this May 17, 2012

xzuttz commented May 18, 2012

I switched the reference to the latest build. I still can't get it to work. Could you please take a look at:

http://jsfiddle.net/F6XFv/4/

http://img403.imageshack.us/img403/6807/imagemapster.jpg

Thanks ! :)

Owner

jamietre commented May 18, 2012

OK - well - there WAS a problem with resize, but that's not what is wrong in your example. Your image map does not match the image in the first place. The image is 800 x 613 pixels. Two of the areas don't even fall within that boundary. Even if you get rid of "resize" and the text-align formatting, it's still not right.

xzuttz commented May 18, 2012

My bad. I was not aware that imageshack resized the original picture. Works like a charm. Thanks a lot!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment