1

I'm trying to display a picture of an object on a page. Given the original dimensions of the picture, is there a way of automatically resizing it to the real size?
Online ruler has a complicated set of instructions for getting screen PPI etc. But is there a way for me to automatically detect those stats with JavaScript?
Although, it would be nice to have universal solutions that work across all browsers on all devices. A solution that works on, for example, the Chrome browsers on MacBook would be good enough.

Any suggestions on where to proceed?

P.S: I know there's a chance this question will get closed, but there's really no better way of asking this question.

Siddharth Rathod
  • 634
  • 1
  • 7
  • 21
Luca Phillips
  • 89
  • 6

1 Answers1

0

You can use mm for millimetres, cm for centimetres, in for inches in css. It is not always accurate as it relies on the monitor dimensions being correct but it is as good as you will get. Macbooks should be quite acurate.

document.getElementById('btn').addEventListener('click', () => {
  let img = document.getElementById('img');
  img.style.height = document.getElementById('height').value + "mm";
  img.style.width = document.getElementById('width').value + "mm";
});
<h1>How to scale a banana</h1>

<img id="img"  style="width: 39mm; height: 26mm"
src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACcAAAAaCAYAAAA0R0VGAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAaASURBVFhHvZdLjBxXFYa/enT1a9o9Dyf22LJjTITlQABlFAmQMJEiwcISCyQSZYOEWIDIBolFxCZiA1IkwBuEWBEECooACQgLICAeEcGxA0a2x47HjMfznunpmX4/qrte/LfbE2NnPASJ8empvl1Vt+r85/z/OfeO5b96NmGPLUkSXDdLFPmD35Zl3bqzu9m3xj0zYcH1clyffoV05gCZXG4A8N3YnoOzEofIneWhT9f4+neP852X/0LmyAFc+7+73nNw2BHJ1gnyx1IUj3yYF1/5LR/77NeY3azjOru733twGAp1ROMU98ccHCnQCeU4DrH02c3uAziZE0PN4/DDOYJWg2I+zWtXFrBTzq76uy/gTHUG7TadqM/YZI2Urr306nmYKA4n3MPuAziLJPIICzc4PXWKL38ui5vUqTa6vHn2MhkvNSB+J9tjcAlJq4j18Zdwmp5AqTiskDHrEmO5DM+e+SkcGLsniD0Cp1yYvyAN771E0l/AsvfRbdRYXyoROiGeVSXruZz+wgt4k+M4OzTmPQJnEcW28IXYx36D1Z/EqpWoV8o0fK0SlifHISkVSjuImHr6G9gqktRdvW8PwKkyQ0cFmsF5/AdQF21Wl147pLRR519zLbKZhED3bWUr7bqM7ysw9fkz2LnUHc3l/wTOSNrw6BD7EySFMpz8FnElwQ57xFtN1itV3rx4k3Ilr3kuYZKWc2fQ61Ipi/3jozz1/E/wDoy+3V52BCcZ61sZSBSHHJqXaYW8dZjz7UNNIVa1hfukrwlir4R1/HvYh36sZSujFSDC39hkaWmF6elrnPtngJsKqHWOKGPDFuNYBoJDOu1wbaXKdfU/z9W7ZXftSjSZNLFoicMspKpYqTWpo0sobThyaNsZYVa8lirPrmlOBStzEys7q4gdUt6EfCmoXkijXqdUWubK7Cp//HOXzU6W0aTIzNYHGBnJ6B0qGEejIzr1Tl8+Hjv+IC88exq/0bkLXOyyxO84ONbCO3xZDzQIqgndepnImiCMTLi2MuLh2KLEdnGcrLRjk/Y84ljNVoLvBx3q9S3K6xtcuFrm4rRDpe1xNOdyfvEx8nn1OjsvQjxx58mPOwAXic5as8XrL34Fv1Qb0mo4TjsjvF56mTfKz2uRvkAyepQ4/Qip3AmyuUdV+nkydoG0VdSL1bvCnNZ0j6jXJ+h0qVY22dpYZGVllqWFOWZmFvn1H0qc/btLtWNxouhxceFRctm0EmsypkBtkzFHbNgDcEZNrmMoHZbFUHP6HUXw4ESfhw4dw/JEqei1+2oHfpcoDCTgLH2NnV6TdqtKu1uh0SxTq6yysrrAytI8C/MLzMyu8NfzywLWZG7FYzTr8P7CGH+7cRI3V5BzQ2N6SKUpCFsriECZwgjiiI+cPATd3hDWNq0mexn7IKX4l2Qmf8hITlUnKir1Hp2Oj98VXf3+IIgwlP4UVhCIcmVtq+loVIPdSlgtxbQaFhO5LO/J55meL3K1cpSs0ZitjLlGt570KmCiMxYo01KM/2uLksH3vyh2tAfU+R2aSzTViffj8wZrW9+k1VPW7MFVAtMSVK2mMLq9SJFbtJo9mu2Yjo5uyyVoaOdR2IcI5/K8y6W1ScL0KKm0smRnBUgZE6hENDpqxIpTNgS2WWvzmU+8j68+8yR+vTWg+R3/QyRJrEhEq9pEaflXLMz8Sc43yI2MSCa2XhjonoFrqQBUQ4G+5KxW7zO3Dm+tZVlpSJf5grQuoStTloAkllqOMoXAxWpRpoi0rdOYsLzR4NSHDvPt557CX1OHMPqTvQPc0MwlKUKV6BYf4Nzvf8HPfv4j/LDLWEF50T5MKcDvJ3QCh2rboZcU1BUUlKd7CkI9aAhIG6RYNA3kHWvUIMIEUM9KwzfXKpz50ic5/anH8ddvAzN2D3BD2+7UXlo6GZ+gPHuD185f4Nw/3uLq/KqqeER9zWRHGTGAJMShjkSdgMWJzoUmHnyUKaW6HyYqpj7Nbpenn/wgzz3zxKDf+53eHcCM7QrubRNIM8lRmae0/yKfGyR37voNriyusbxaZmZpk/n1CuV6V4uHFnYBkzc9Kr0m4aCIjjxQZOrEYU5NPcwTH30EOn36bX+QxbuBGXt34P7DtrNp3uWqVzmmbM1yY0CnlEGDutkeVLbfkz41sZBWox3fN7ilizoCeiosE/JOoLbtfwa3k20D3jbjcHjoRLcMiDi+PWc3QLcN/g3KY+sL/ICayQAAAABJRU5ErkJggg=="><br>
<input id="height" value="26">x<input id="width" value="39">
<button id="btn">Change</button>
Adrian Brand
  • 20,384
  • 4
  • 39
  • 60
  • All these units don't rely on the monitor's dimension, they rely on the size of a pixel, i.e on the monitor's resolution (or the number of pixels on a given area). They're directly linked to a `px`, and thus don't offer anything more than `px`, except that they avoid a `calc()`. – Kaiido Oct 12 '22 at 05:58
  • @Kaiido It exactly relies on the dimensions, that is how the browser knows what size how many pixels are. Changing screen resolution and these css properties will keep the same size but being the correct size is it the OS knows the correct dimensions of the screen. – Adrian Brand Oct 12 '22 at 06:51
  • The browser has no idea what the physical dimension of the monitor is, even the OS may ignore it, for instance if we use a projector, the actual physical dimension of the image will depend on the distance between the lens and the screen. – Kaiido Oct 12 '22 at 06:55