SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Member
    Join Date
    Aug 2008
    Posts
    6
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    HELP - Resizing text over newly resized image...

    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.

    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
    * Profit-Pulling Xsitepro Templates - Grab Yours Here!

    * Grow Your Adsense Empire Faster with... Adsense Ready Templates

  2. #2
    SitePoint Evangelist
    Join Date
    Jun 2007
    Location
    North Yorkshire, UK
    Posts
    483
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.

  3. #3
    SitePoint Member
    Join Date
    Aug 2008
    Posts
    6
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by PhilipToop View Post
    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.
    And how can this be achieved?

    PJ
    * Profit-Pulling Xsitepro Templates - Grab Yours Here!

    * Grow Your Adsense Empire Faster with... Adsense Ready Templates

  4. #4
    SitePoint Evangelist
    Join Date
    Jun 2007
    Location
    North Yorkshire, UK
    Posts
    483
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •