Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 5 of 5
  1. #1
    Regular Coder
    Join Date
    Jun 2002
    Location
    Australia
    Posts
    197
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Unhappy resize image pain!

    Hi
    I was wondering if there is a better way to resize an image
    i can change the image using width= height= but is
    there anyway js can request the browser to use a method that does not drop
    lines or cloumns, like resampling?

    My image is a transparent box
    when it is resized i find that lines that descibe the box get 'dropped'
    the result is poor.

    Should i use svg to create the box?
    help please
    ez
    Animation Rule #64
    Poor quality images are often artistic,
    Poor quality sound is ALWAYS annoying.

  • #2
    Senior Coder A1ien51's Avatar
    Join Date
    Jun 2002
    Location
    Between DC and Baltimore In a Cave
    Posts
    2,717
    Thanks
    1
    Thanked 94 Times in 88 Posts
    Helped if you showed what you are talking about.

    Eric
    Tech Author [Ajax In Action, JavaScript: Visual Blueprint]

  • #3
    Regular Coder
    Join Date
    Jun 2002
    Location
    Australia
    Posts
    197
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Its a really common problem where images with horizontal or vertical lines
    that are resized by the browser drop lines or columns

    I dont know how to attach the image that the browser resizes
    (other than a screen capture and.. i cant get it out of my firewall)

    the original
    is a simple 50px by 50px completely transparent gif
    except on the outer border pixels which are blue
    so it looks like a transparent blue box

    The browser displays it correctly if i use
    <span id=my_box><img src=box.gif width=50 height=50></span>
    as a blue box

    Now if i use dhtml to resize it
    document.getElementById("my_box").innerHTML="<img src=box.gif width=50 height=10>"

    How does the browser resize it? It appears to do the resizing by
    dropping lines or columns from the image so that the top and bottom lines disappear! It no longer looks like a box, it looks like two vertical lines 50px apart..

    My question is :
    Is there a way to force the browser to use another resizing method such as re-sampling

    Hope that is clearer..
    ez
    Last edited by ez4ne12c; 06-12-2007 at 03:52 AM.
    Animation Rule #64
    Poor quality images are often artistic,
    Poor quality sound is ALWAYS annoying.

  • #4
    Senior Coder A1ien51's Avatar
    Join Date
    Jun 2002
    Location
    Between DC and Baltimore In a Cave
    Posts
    2,717
    Thanks
    1
    Thanked 94 Times in 88 Posts
    If it is just a border, why don;t you either just use a div or set the border of the image with CSS?

    Soubt you can do anything about the image other than using JavaScript to make sure the image is a size that it will nt chop. The browser does not understand the image and when you stretch things out, it will get distorted.

    Eric
    Tech Author [Ajax In Action, JavaScript: Visual Blueprint]

  • #5
    Regular Coder
    Join Date
    Jun 2002
    Location
    Australia
    Posts
    197
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Hey just using the border is a great idea, thanks!
    ez
    Animation Rule #64
    Poor quality images are often artistic,
    Poor quality sound is ALWAYS annoying.


  •  

    Posting Permissions

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