Controlling Actual Image Size

[Drubage]

Hey there,

I am trying to show a size chart on our website but I need the graphic to display identically no matter what monitor size or resolution is viewing the page. Is there a way to make sure the image will always look the same no matter what monitor is viewing it? Or is there a way to use the monitor resolution and some other info to manipulate the image so it will always display the same on all browsers? Any help would be greatly appreciated, thanks!

-Drew

[jettlarue]

i dont think you can see the size of the monitor...but you can see the size of the window. The monitor is separate from the computer so I dont think you coulod view it from anything...im pretty sure you couldnt send a request for it even....so just wanted to clear that up:)

[Drubage]

Yes, that is the problem I am running into. I can get the screen size, but not the actual monitor size. I saw a flash movie once where a user would size up a quarter to a quarter picture on the screen and then, when they moved onto the next page of the movie, it would take the data from the first page and use it to re-size the ruler image on the next page. Any idea where I could find something like that or is there an alternative?

-Drew

[Jona]

If you want to keep the image's dimensions (size implies the size of the file) exact, you should set a width and height on the IMG tag.


<img src="chart.gif" alt="A chart." width="200" height="150">


If you want your image to scale-to-size, use percentage widths (though this could potentially distort the image, depending on how much it must stretch or shrink to fit the size of the screen).


<img src="chart.gif" alt="A chart." width="50%" height="20%">

[Drubage]

Yes, but the problem is that the image will appear in a different size on different monitors based upon monitor size and resolution. The best example is that I would like to display an image of a quarter (the coin) on the screen, and I want the quarter to look exactly the same no matter what monitor or resolution the user has. So, each user could hold a real quarter up to the screen and it would perfectly cover the image of the quarter (a .jpg) no matter what their monitor settings and size are. Is there a way to make sure that the image occupies the same exact amount of space (in inches) on the screen regardless of the user's settings?

-Drew

[Jona]

Originally posted by Drubage
Yes, but the problem is that the image will appear in a different size on different monitors based upon monitor size and resolution. The best example is that I would like to display an image of a quarter (the coin) on the screen, and I want the quarter to look exactly the same no matter what monitor or resolution the user has. So, each user could hold a real quarter up to the screen and it would perfectly cover the image of the quarter (a .jpg) no matter what their monitor settings and size are. Is there a way to make sure that the image occupies the same exact amount of space (in inches) on the screen regardless of the user's settings?

-Drew


<img src="quarter.jpg" alt="A quarter, life-size." style="width: 2in; height: 2in">

[Drubage]

This will work across all browsers and monitors? I've been trying to set the image size to the actual image size in Photoshop and the images are looking all distorted.

-Drew

[Jona]

Originally posted by Drubage
This will work across all browsers and monitors? I've been trying to set the image size to the actual image size in Photoshop and the images are looking all distorted.


The code I posted has two CSS properties (width and height). Their values, both of which are 2 inches, specify exact dimensions that any CSS-understanding browser (anything Netscape/IE 3 or before, which no one uses anymore) will adhere to.

[Drubage]

Right on, thank you! Is the CSS assuming an image resolution of 100 pixels? I changed the images in Photoshop to 100 pixel resolution, resized them so they would look correct, and then used that image size in the tag and they appear correct on my monitor. The page in question is here:

http://www.tribalectic.com/SizingInfo.asp

Do the coins look correct on your monitor?

-Drew

[Jona]

Looks right to me.

[Drubage]

Cool, but it does not appear correct on other monitors I've been looking at. I am using a widescreen Dell laptop, so maybe that's why it is working for me, but on regular monitors it does not appear to be the correct size. Any ideas why?

-Drew

[gorky]

Originally posted by Drubage
Right on, thank you! Is the CSS assuming an image resolution of 100 pixels? I changed the images in Photoshop to 100 pixel resolution, resized them so they would look correct, and then used that image size in the tag and they appear correct on my monitor. The page in question is here:

http://www.tribalectic.com/SizingInfo.asp

Do the coins look correct on your monitor?

-Drew I measured the images and then drastically reduced my resolution and this caused the images to, as expected, dilate. There will always be problems with people viewing in a higher or lower pixel-resolution, as well as a different aspect ratio of whatever they're viewing on. (exagerated example: someone viewing your page on a phone, somehow at 800x600 will see a very small quarter)

From what I know (which probably is a small amount compared to Jona), the best you can do is make the picture appear correctly in the most standard situations (maybe 1024 x 768) and then put a note recommending that resolution when viewing the page, as you currently have done.

-Gorky