View Full Version : resize image pain!

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?
help please

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)

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..

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?

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.


06-13-2007, 02:29 AM
Hey just using the border is a great idea, thanks!