2

I remember Joel once told a trick for scaled images to be displayed smoothly in IE:

img {-ms-interpolation-mode:bicubic;}

Which makes downsized images (with a smaller size than that of the actual image by CSS or HTML width property) smooth without looking rugged.

Is there any similar CSS rules for this to work across all major modern browsers such as Firefox and Chrome?

datasn.io
  • 12,564
  • 28
  • 113
  • 154
  • Are you looking for something like [`image-rendering:auto`](https://developer.mozilla.org/en-US/docs/CSS/image-rendering)? (doc linked) Note the Browser Compatibility table at the bottom for which browsers support the different attributes. – jedwards Nov 06 '12 at 01:26
  • 1
    I don't know of a CSS equivalent, but there are server side options for re-scaling images: http://www.gasi.ch/blog/inline-multiscale-image-replacement/ – coopersita Nov 06 '12 at 01:32
  • Added it [here](http://www.avivaly.com/product/silk-wedding-dress-the-princess-bride/) but it doesn't seem to work. Try clicking one of the images to open up the lightbox, when your cursor is over the image, an alignment of small thumbnail images appear at the bottom of the modal window and all of them are rugged still in Firefox. But in Chrome it seems to be working. – datasn.io Nov 06 '12 at 02:03
  • possible duplicate of [Image scaling causes poor quality in firefox/internet explorer but not chrome](http://stackoverflow.com/questions/9945363/image-scaling-causes-poor-quality-in-firefox-internet-explorer-but-not-chrome) – e-sushi Dec 14 '13 at 09:13

2 Answers2

1

Is there any similar CSS rules for this to work across all major modern browsers such as Firefox and Chrome?

No.

-ms-interpolation-mode is obsolete as of IE9. There is the image-rendering CSS property, but it is experimental and the supported values vary across the browsers. This SO question addresses best practices for the image-rendering property, which will cover most browsers, and you can even throw in the IE-specific tag for IE7 and 8, but later IE versions and certain combinations of browsers and upscale/downscale are not supported.

Obviously you can do something server-side to dynamically rescale images, and if you really need high quality that will be your best choice.

Community
  • 1
  • 1
AndrewS
  • 8,196
  • 5
  • 39
  • 53
-4

zoom:0-1; will scale just about anything.

user1757120
  • 323
  • 2
  • 13