I'd like to scale a large image down to the width of the user's screen. I don't want to set width: 100% because it distorts the image. Can I use CSS transforms for this?
Thanks
Mike
views:
108answers:
3
A:
The answer is, in theory, yes. However, CSS transforms are still a W3C working draft at this time, and not widely supported. The Webkit developers have started adding various -webkit-transform options in their nightly builds of Safari, and taking their cue, Firefox 3.5 just added some -moz-transform properties. Just for fun, I just tested out -moz-transform: scale(0.5) on the Stack Overflow logo, and it did work in FF3.5, but the scaling algorithm used is the same as if you had forced the content to a specific width and height using HTML properties or CSS.
The best scaling is generally achieved using a cubic interpolation algorithm, such as those found in graphics programs and libraries, which is why people generally save different sizes of their images rather than scale them with HTML/CSS. If you have a server-side language such as PHP, one option would be to fetch the master image with an HTTP request that contained the size parameters you wanted, and use a GD library (or similar) to scale the image on the fly and return it.
zombat
2009-07-30 03:26:34
A:
This is a mootools javascript solution I wrote to get images to look sweet. Not sure if it's what you're going for though.
rpflo
2009-07-30 06:07:28