Image not scaling correctly in Firefox

I have a 2550px x 3300px image 开发者_JAVA百科of a document. I scale it to 901px to 1166px using css. Also used image width/height attributes without css. It looks great in chrome and IE but the image contents look jagged in FF (3.6). Resizing the image itself is not an option (for good quality printing).

Any suggestions?

You could try adding the CSS tag image-rendering: optimizeQuality; although this should be the default. Perhaps you have another tag somewhere which is overriding the default?

From http://articles.tutorboy.com/css/resize-images-in-same-quality.html

If the intention is to get a better quality when the user prints the page you could use separate style sheets for print and screen.

<style>
@media screen
  {
      #origImage { display:none; }
  }
@media print
  {
      #screenImage { display:none; }
  }
</style>
...
<img id="origImage" src="original.jpg" />
<img id="screenImage" src="resized.jpg" />