Over a million developers have joined DZone.

Resizeable Images (without losing quality!)

· Web Dev Zone

Start coding today to experience the powerful engine that drives data application’s development, brought to you in partnership with Qlik.

Most web browsers make resizing text an easy thing to do*, but not all web browsers will resize images along with that text**. Good web designers know this and go to great lengths to make sure their web layouts don't bork when text is resized. But did you know you can make images grow and shrink along with the text?

The trick is to give your images a unique class and set their widths with an em value.

HTML:
fruit


CSS:
img.expand { width: 10em; }


Now because you are forcing a specific width on this image, the web browser is in charge of doing the resizing, which is generally frowned upon. I tend to disagree though, I know that a web browser will never be as intelligent at retaining image quality as Photoshop, but the proof is in the pudding and I think generally web browsers do a fine job at it.

Here is the trick: make sure your starting image is larger than the default size. If the size your image is exactly the size as it is displayed on screen at the default text size, you are going to lose image quality as you size it up. But if your image is larger, it will be scaled down at the default size and have room to grow while maintaining resolution.

[VIEW EXAMPLE]

*Except, of course, IE <= v6 which will not resize font sizes set in pixels.
**Except, of course, really nice web browsers like the latest releases of Firefox and Opera.

Original article here.

Create data driven applications in Qlik’s free and easy to use coding environment, brought to you in partnership with Qlik.

Topics:

Opinions expressed by DZone contributors are their own.

The best of DZone straight to your inbox.

SEE AN EXAMPLE
Please provide a valid email address.

Thanks for subscribing!

Awesome! Check your inbox to verify your email so you can start receiving the latest in tech news and resources.
Subscribe

{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}