Firefox image resizing driving me mad

November 24, 2004 11:55 AM

FireFox filter. This is driving me mad. My website has a little JavaScript (inside) to drag in a random image. Each image is 150 wide (varying heights). IE displays them fine. Firefox 1.0 resizes certain images. Anyone know why?

The JavaScript specifies the width (but not the height as each image is different):

var choice = pickRandom(range);
document.writeln('<a href="about.htm"><img src="images/bl'+choice+'.jpg" 
class="randompic" width="150" alt="blah"></a>');

It's easy to see the browser re-sizes them as it has that wierd pixellated quality that browser-resized images have (+it spills out of the containing div).

The images are at the bottom of the yellow side-bar (self-link, sorry); refreshing the page brings new ones. I've checked Bugzilla, but can't help feeling that I'm going mad ...

posted by Pericles to Computers & Internet (8 answers total)

try setting the width of ".randompic" in your stylesheet to 150px instead of auto.
posted by C.Batt at 12:23 PM on November 24, 2004

Strange, it seems to only do it with images that are wider than they are tall. Maybe just dumping the "width" argument will fix things?
posted by zsazsa at 12:23 PM on November 24, 2004

yeah i'd say dump the width attribute. if you look at any of the pics outside of the page, just by right-click and view image, none of them are too wide - so stop specifying size. should fix it.
posted by caution live frogs at 12:44 PM on November 24, 2004

Response by poster: hmm.. forcing the width of randompic to be 50px (as I should've done before) makes them the correct size. but squishes them as if the browser believes that the previous size was correct. Dumping the width argument doesn't change them. It always seems to be the same images, and I've checked again; on the server, they're 150px wide. I need beer .....
posted by Pericles at 12:44 PM on November 24, 2004

Response by poster: (It does the same thing in Dreamweaver on the local copy too; all images are 150px wide).
posted by Pericles at 12:47 PM on November 24, 2004

Could it be that Gecko rendering engines [correctly] treats images as inline while IE treats them as block? Try:
img { display:block; }
to force a block display across all browsers.

posted by Fezboy! at 1:18 PM on November 24, 2004

It's probably that min-height:170px rule, coupled with the width:auto. If a pic is too squat, it'll get stretched vertically and its width resized proportionately. Try ditching them both.
posted by nikzhowz at 2:11 PM on November 24, 2004

Response by poster: Nikzhowz wins the prize. Ages ago I put the min-height at 170, as that was the shortest picture, and forgot to change it. (IE seemed to demand some kind of min-height, or it scrunched everything into a 10px high picture). Changing it to 60px made everything lovely.

Thanks all!
posted by Pericles at 12:28 PM on November 25, 2004