How to set a dimension in real life units, like cm or mm?

Question

I'm trying to make an img, get a certain height, in millimeters.

Apparently, the CSS rule height: 10mm; does not do this, it translates to height:37.8px , according to this link : http://css-tricks.com/the-lengths-of-css/

so how do I set the height to a real life unit, regardless of what device the visitor uses?

p.s.

If this cannot be done with pure CSS, jQuery or any other solution will do.

Just show me a way, please.

Thanks for any help !

p.s. 2:

if the question is not clear, what I tried is :

responsive CSS, media queries etc. didn't work. see this page : http://webtasarimveprogramlama.com/cetvel/alternatif-1/

by emulating with mobile devices using this page : http://www.brickandmobile.com/mobile-emulator/

and though it is tagged as responsive-design, I guess it is something like anti-responsive design :)

What do you want to do if the output device is a projector, and it's got no way to tell how far away the screen it's projecting onto is? — Wooble, Oct 05 '13 at 20:52
I think the best you could hope to do would be to try and get the device's DPI (dots per inch.. see this question: http://stackoverflow.com/questions/476815/can-you-access-screen-displays-dpi-settings-in-a-javascript-function) and then do the math (using javascript) to figure out how many pixels would best represent an inch on that display, and then set the css rule through javascript. That's a lot of work for a rather trivial change if you ask me. Not to mention it won't be well supported. — Blake Mann, Oct 05 '13 at 21:06
This article might interest you (although it doesn't contain a solution): http://alistapart.com/column/responsive-typography-is-a-physical-discipline — bfavaretto, Oct 05 '13 at 21:12
@BlakeMann this seems what I'm seeking. I would really appreciate if you could post this as an answer with how can I do this. Thanks ! — jeff, Oct 05 '13 at 21:52
I can't tell you the specifics (because I don't know them, not because I don't want to haha), just hoping to point you in the right direction. — Blake Mann, Oct 05 '13 at 21:56
Sadly there is no way of knowing the physical size of the display used. [This might turn you off the thought](http://mobile.smashingmagazine.com/2013/03/21/responsive-web-design-with-physical-units/). @Blake Mann is right, DPI is the closest you can get to controlling physical size. Since you don't know what screen size your users will have, the best option is to create something that looks acceptable on all displays — Timmah, Feb 27 '14 at 11:55

score 0 · Answer 1 · edited May 23 '17 at 11:48

Based on the answer of this question: Pixel to MM equation?

You could try to calculate the mm to px or the other way around by getting the size of the div with mm size.

<div id="mm" style="height:1mm;display:none"></div>

and then

var pxPerMM = $('#mm').height();

Hopefully it helps.

Edited:

So, I just realized that you asked about how to assign the millimeter. If you use jQuery, you can assign it by using the css() function. Example: https://jsfiddle.net/yusrilmaulidanraji/Lyzr2ju1/

$("#millimeter-size").css("height","50mm");
$("#millimeter-size").css("width","50mm");

#millimeter-size{
  border: 1px solid black;
  
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<div id="millimeter-size">

</div>

How to set a dimension in real life units, like cm or mm?

p.s.

p.s. 2:

1 Answers1