HTML / CSS: what should I use to determine the height / width of an image to make it resolution independent?

Question

I read all over the internet that I should not define fonts (or anything) with absolute height / width / pixel size and use EM instead ... so that on higher resolution displays, my website can scale accordingly.

However, what I use to determine the height / width of IMAGE ... because the images will not scale well (they look jagged)

UPDATE

To clarify, I am not referring to the page enlargement. I mean, how to make my web application independent so that it looks correct on higher DPI displays.

Answer 1

I know this question is a bit outdated, but I want to put it there for those who may come later. Speaking of mobile devices with a higher pixel density, mobile browsers will enlarge the page by an amount so that it looks as if the web page is not very small. Devices implement this scaling in accordance with the CSS 2.1 specification .

, 1,5x . - 150%, . 2 ... - 200%.

- . , , . 1,5x , . , 2x .

, 600x400px, :

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

Answer 2

em (%), IE (View > Text Size), , px ( - ), . ( , px.) . ems .

px , ; em . , ( ), em. px .

( ), , ( ) em px.

Answer 3

em . , , , , ( ).

Answer 4

em IE, , , , , .

, , , body:

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

, px : http://w3schools.com/css/css_image_gallery.asp. .

Answer 5

.

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

, .

SVG , DPI, .

. , . .

http://www.cssplay.co.uk/menu/em_images, , ems. Opera .

Answer 7

For retina devices, you can also have a second image twice the size and add @ 2x to the file name ... so if you have a 200px x 300px image called image.jpg you just put another one that is 400px x 600px and name it [e-mail] and Retina devices will show it.