Why Do Resized Images in Firefox Get A Black Line Under Them?

Question

If you take the following image:

http://ecx.images-amazon.com/images/I/41uxky7oT8L._SL160_.jpg

place it in an html file with an IMG tag, then resize it to width 160 but do not set the height setting, and are on Firefox, you will see an ugly black line under the image.

For instance:

<img src="http://ecx.images-amazon.com/images/I/41uxky7oT8L._SL160_.jpg" alt="" width="160" />

or

<img src="http://ecx.images-amazon.com/images/I/41uxky7oT8L._SL160_.jpg" alt="" style="width:160px;" />

(Note I'm using FF 3.6.3 on Ubuntu Linux 8.04 LTS, if that matters.)

Note I don't want to set height because then the image would look funny when all I want to do is change the width so that fits nicely in a column of amazon products. Plus, I cannot always accurately predict the image height, and some APIs to inspect the image may slow a website down too much.

So, why do you think the black line appears, and what can I do programmatically in the HTML or CSS to prevent it? Note I've already tried setting the style of background-color for the image to #FFF and I still get this issue.

Answer 1

Resize the image with JavaScript as needed to prevent distortion by the browser. I do it because only Opera and Chrome "smooth resize" large images to tiny sizes.