Quote:
Originally Posted by JSWolf
There's a lot wrong with that. The image is 100px square. Imagine that being blown up to 1/2 an inch on an 8" eInk screen or on a 10.3" LCD screen.
|
It actually doesn't matter the
dimensions of the screen - using 'width=.5in' will make it .5in on any device.
The problem is the
resolution of the screen.
A high resolution screen (@500 PPI Pixel density) will make the image (at 100 pixels wide) blown out - it's stretching the 100 pixels to fill 250 pixels (.5 x 500).
That's why it is always better to have as high a resolution image as is feasible.
Most devices/apps do a pretty good job compressing an image...not so much expanding one that is too small.
For the OP: Most people would want the image to be relative to the rest of the document/font/screen size...it looks awfully funny to have an out of proportion image. That's why my previous example had a percentage with a limit on how big it gets. However, if you want the image to be .5 inch wide (because, presumably, you are stuck in the paper print paradigm
), then use width=.5in....but I would get a higher resolution image, 250-300 pixels square.
Code:
div.image {margin:2em auto; width:.5in}
<div class="image"><img alt="" src="images/ne-logo100.png"/></div>