Why have images resized in Firefox? Get a black line under them?
If you take the following image:
http://ecx.images-amazon.com/images/I/41uxky7oT8L._SL160_.jpg
put it in html file with IMG tag then resize it to 160 but don't set height setting and in Firefox you will see 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 the height, because then the image will look funny when all I want to do is change the width to fit perfectly into the amazon product column. Also, I can't always predict the height of the image accurately, and some APIs for image validation can slow down the site too much.
So why do you think the black line appears, and what can I do programmatically in HTML or CSS to prevent it? Note. I've already tried setting the background style for an image to #FFF and I still get this problem.
a source to share