HTML/CSS: What should I use to define image height/width to make it resolution independent?

Question

I've read all over the Internet that I should not define fonts (or anything) with absolute pixel height/width/size and instead, use EM ... so that on higher resolution displays, my web site can scale appropriately.

However, what do I use to define IMAGE height/width ... because images won't scale well (they look pixelated)

UPDATE:

To clarify, I'm not referring to page zoom. I'm referring to how to make my web application resolution independent so that it will look correct on higher DPI displays.

Answer 1

Normally, I use em for most elements and exact pixels for images. Your images will not scale with everything else when the text size is adjusted, so you need to review how the page looks at different text sizes and adapt when required, but I find this a reasonable compromise (versus scaling the images that is).

Answer 2

Using em when resizing the text in IE, it becomes larger than it should when made larger, and smaller than it should when made smaller.

The solution that works in all browsers, is to set a default font-size in percent for the body element:

body {font-size:100%;}
h1 {font-size:2.5em;}
h2 {font-size:1.875em;}
p {font-size:0.875em;}

http://w3schools.com/css/css_font.asp

You can find a perfect example of image styling using px with source code here: http://w3schools.com/css/css_image_gallery.asp. The images scales perfectly with the text increasing or decreasing it.

Answer 3

Font sizes should be set in em (or %) because if the user changes the text size in IE (View > Text Size), text set in px (or have a fixed size somewhere up the inheritance chain) won't be resized. (Other browsers have no problem resizing text set in px.) See How to size text using ems for more on this.

Images with px dimensions are not resized when the user changes text size; images with em dimensions are resized. So if an image's size should be relative to the text size (a rare case), then use em. Otherwise px dimensions is fine.

For page zoom (where the browser makes everything larger or smaller), it doesn't matter if dimensions (text or image) are defined using em or px.

Answer 4

see the solution of this page

http://nickcowie.com/2005/elastic-images/

HTML

<div class="imageholder">
<img src="/images/tim_underwood_rb2.jpg" class="vertimage43 floatleft">
<img src="/images/joe_smash1v.jpg" class="vertimage43 floatright">
</div>

CSS

.widecolumn .imageholder {
width:51.5em;}

.widecolumn .vertimage43 {
height:32em;
margin:0;
padding:0;
width:24em;}

Answer 5

It's not really possible to make a page resolution-independent when it comes to images.

You can use SVG for images, because vector graphics truly are indepent of DPI, but this won't work well for photos.

You can use high-resolution images and display them at smaller size. This way, when sized up, they look a lot better. On some browsers, the downscaled image won't look too bad.

This is an example page, http://www.cssplay.co.uk/menu/em_images it has high-res images that are sized with ems. On Opera with page zoom, the high res images retain their clarity at higher zoom levels.