06-11-2007, 02:01 PM
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?
06-11-2007, 02:13 PM
Helped if you showed what you are talking about.
06-12-2007, 03:43 AM
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)
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..
06-12-2007, 05:01 AM
If it is just a border, why don;t you either just use a div or set the border of the image with CSS?
06-13-2007, 02:29 AM
Hey just using the border is a great idea, thanks!