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

I know this question is a bit old, but want to put this out there for anybody who may come along later. When talking about mobile devices which have higher pixel densities, the mobile browsers will zoom the page in by an amount to make it appear as though the web page is not very small. Devices implement this zooming as per the CSS 2.1 specification .

For example, many devices today have a 1.5x pixel density ratio compared to desktop monitors. As a result, the mobile browser will zoom websites by about 150% to compensate for the extra pixels. The new retina display has a 2x pixel density ratio... and as such the browser zooms in websites by about 200%.

Point of the matter - developers should not have to worry about different resolution devices. If you wish for your images to show up clearly on high resolution devices, you will need a higher resolution image. You generally don't have to worry about 1.5x devices as the quality difference is negligible and not worth the effort. However, the new retina display causes some really blurry images, and as a result you should use 2x the image.

So for the following image, you would want to export a 600x400px image in order for the image to show up clearly on the new retina display:

<img src="photo.jpg" style="width:300px; height:200px" />

Answer 2

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 3

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 4

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 5

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 6

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.

Answer 7

对于视网膜设备，您还可以使用两倍大小的第二个图像，并将@ 2x添加到文件名中......所以，如果您有一个名为image.jpg的200px x 300px图像，则只需输入另一个400px x 600px的图像并命名为image@2x.jpg和视网膜设备将显示相反。