Comments on: Firefox image resizing driving me mad

Question: Firefox image resizing driving me mad

Pericles — Wed, 24 Nov 2004 11:55:28 -0800

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

By: C.Batt

C.Batt — Wed, 24 Nov 2004 12:23:07 -0800

try setting the width of ".randompic" in your stylesheet to 150px instead of auto.

By: zsazsa

zsazsa — Wed, 24 Nov 2004 12:23:38 -0800

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?

By: caution live frogs

caution live frogs — Wed, 24 Nov 2004 12:44:14 -0800

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.

By: Pericles

Pericles — Wed, 24 Nov 2004 12:44:34 -0800

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

By: Pericles

Pericles — Wed, 24 Nov 2004 12:47:37 -0800

(It does the same thing in Dreamweaver on the local copy too; all images are 150px wide).

By: Fezboy!

Fezboy! — Wed, 24 Nov 2004 13:18:02 -0800

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.

By: nikzhowz

nikzhowz — Wed, 24 Nov 2004 14:11:05 -0800

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.

By: Pericles

Pericles — Thu, 25 Nov 2004 12:28:05 -0800

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!