HELP - Resizing text over newly resized image

JavaScript
1

Hi,

I’m working with an application that passes parameters via the URL to indicate the correct browser size to which I must resize an image.

Now I wrote some code to resize the image according to the browser size parameters passed by the app. All well and good…

But after resizing the image the content that’s displayed on top doesn’t fit correctly and I am hoping someone here could maybe point me in the right direction. :wink:

Depending on the browser size the text should either shrink or grow and yet still be displayed correctly - relative to the resized image.

Because I can’t direct link to this project I put this link up so that you can have a look at what I’m working on.
http://www.xsprotemplates.com/test/test.html

You’ll notice (if you have a look) at my test page that you can change the browser’s width and size values in the URL and the image will resize itself accordingly, but the content doesn’t resize and or sit well relative to the resized image. Which is what I’m try to figure out!

Is this something I can do with JAVASCRIPT?

Your help is greatly appreciated.

PJ

2

And how can this be achieved?

PJ

3

As you resize the image the part of the image where the text is to be placed will change proportionally. The font-size also needs to be changed proportionally.

Take the simplest case of a change in the height. Suppose at 800px the font-size is 4em at 400px you would except 2em to work and at 1200px you would expect 6em to work.

Clearly with the situation where both the height and the width alter. If the height increases and the width decrease. You need tall narrow characters and this approach will not give you that. You would probably need to comprise and work with the smaller dimension.

4

You are setting the font-size to 4em in an inline stylesheet. Surely the solution is to adjust this appropriately based on the image size.