How To Display A "actual Size" Image? - CSS Forum At WebmasterWorld

Toggle navigation

• Dashboard
  • Dashboard Tracker
  • Add / Edit My Forums
  • System Announcements
• Discussion
  • Active Thread Feed
  • Top Threads Today
  • Top Threads This Week
  • Top Threads Library
• • Go!

• • View All
• • View All
• • Login
  • Logout

1. Home
2. Forums Index
3. Browser Side / CSS 7:15 pm Dec 19, 2025

Forum Moderators: not2easy

Message Too Old, No Replies

How to display a "actual size" image?

displaying actual size of an image

touchaponk

Msg#:4039817 2:13 am on Dec 9, 2009 (gmt 0) I wanted to display the actual size of each products (eg. if the product is 5 cm wide, it really appears 5cm wide on screen) I know that the image is scalable at the client size but I just wanted the original size to display the actual size of the image. I know one way which is using absolute unit in CSS but as I do some search many people say that absolute unit should be avoided due to various issues. Anyone know any alternative way to display images in actual size? Thx Ps. the displaying thing will always be only at most 10cm in dimensions so screen size compatibility wouldnt be a problem.

StoutFiles

Msg#:4039863 4:20 am on Dec 9, 2009 (gmt 0) <img src="yourimage.gif"> would default to the actual size of the picture.

If you want to shrink or blow up the picture to a set width...

<img src="yourimage.gif" width="yourwidth">

Is this what you want?

johnnie

Msg#:4040005 10:51 am on Dec 9, 2009 (gmt 0) Don't pin me down on this one, but as far as I know its perfectly fine to use 'in', 'mm' and 'cm' as size qualifiers in your height and width properties (I know you can in CSS). Also, the 'pt' is defined as being 1/72 of an inch.

[edited by: johnnie at 10:55 am (utc) on Dec. 9, 2009]

touchaponk

Msg#:4040006 10:52 am on Dec 9, 2009 (gmt 0) that one would give me an actual pixel of the image but since different screen have different pixel size and DPI, the image would appear in a different "actual size" eg. 24" screen with 1920x1080 and 26" screen with 1920x1080...the image would definitely appear larger in the 30" screen I wanted the image to appear as the same size in all screen (all 5 cm no matter how large the screen is)

touchaponk

Msg#:4040010 11:03 am on Dec 9, 2009 (gmt 0) @johnnie I'm now experimenting on using absolute size on different screen and browser, but since i dont have 2 screens with different size and same resolution, it might be hard to prove that it's really working thx

swa66

Msg#:4040011 11:03 am on Dec 9, 2009 (gmt 0) I don't think many, let alone most users actually set the DPI of their display into the OS. Hence the computer generally doesn't know the size and uses some horrible OS default.

In conclusion: unless you're going to instruct people to set this properly for all OSes out there and give them a way to verify the settings are correct. There's no way to do this.

Alternatives would be: include a human hand or a ruler in the pictures.

[edit: fixed confusing typo]

[edited by: swa66 at 1:32 am (utc) on Dec. 10, 2009]

johnnie

Msg#:4040046 1:15 pm on Dec 9, 2009 (gmt 0) Wouldn't the browser take the current screen DPI into account when rendering absolutely sized fonts? Anybody with a dual screen who can test?

touchaponk

Msg#:4040047 1:28 pm on Dec 9, 2009 (gmt 0) I have a dual screen and I tried rendering image with 116mm in css, it turns out to be exactly 116mm on my 24" with 1920x1080 resolution screen with google chrome and firefox (got around 105mm on IE8) while it becomes only 105mm when I render it in my smaller 14.1" laptop screen so I guess it's impossible to render a fixed actual size :(

CSS_Kidd

Msg#:4040051 1:36 pm on Dec 9, 2009 (gmt 0) Swa is right. I tried the very same thing when working on a site for miniatures (doll house stuff). There is no way to present the absolute actual size of something by its self. Too many people have way too many different screen settings, resolutions and so on. We found the best, and the neatest way was to relate the items with common objects like quarters, pencils or a hand as swa suggested.

But then again... I have to ask... To where, in my case, it was important to display actual size of an object... Is it as necessary in your case?

johnnie

Msg#:4040056 1:58 pm on Dec 9, 2009 (gmt 0) Thank you for that touchaponk. A valuable new lesson for me.

touchaponk

Msg#:4040077 2:30 pm on Dec 9, 2009 (gmt 0) I'm buidling a website as a showcase of my products and I wanted the viewer to view what the actual size is so they know better how is it gonna be like when they actually buy it. I, for my self, found out sometimes order some product online and it turns out to be bigger or smaller than I expected.

• 

Join The Conversation

• Register For Free! - Become a Pro Member!
• See forum categories - Enter the Forum

Moderators and Top Contributors

• Moderator List | Top Contributors:This Week, This Month, Nov, Oct, Archive, Top 100 All Time, Top Voted Members

Hot Threads This Week

• December 2025 Google Search Observations
• AdSense Earnings and Observations - December 2025
• Softblocking 35.0.0.0/8
• Is anyone getting hits from 121.99.4.0/24 ?
• Does Sponsored Content Affect SEO or Discover?
• Google Search Console is showing less clicks
• Google's 100billion Quarter
• Do you get tired of others copying your content?
• 2025 Link Building Trends and Insights
• Sitemaps for large websites and SEO - add everything or just some?

1. Home
2. Forums Index
3. Browser Side / CSS 7:15 pm Dec 19, 2025