Calculate inner divs width/height in mm (relative to outer div with known width/height in mm.)

Question

1. I have an outer div with a assigned width/height in mm. (mm is just assigned values, not used for rendering).
2. Inside it i have another div with a real width/height in px.
3. The two divs can have different ratios.

What i want to do is to calculate the inner divs width/height in mm. with JavaScript and also take scale into consideration.

Example 1: the outer divs assigned width/height is 30x30mm, scale is 0.8 and inner divs width/height in px is 600x600px, the result should then be 24x24mm.

Example 2: the outer divs assigned width/height is 60x30mm, scale is 1.0 and inner divs width/height in px is 300x600px, the result should then be 15x30mm.

The outer divs width/height in mm is considered max sizes.

Guess it's easy, but the fact that the divs/surfaces can have different ratios made it to complicated for me.

var calcDimensions = function(scale) {

   var surfaceWidth, surfaceHeight, contentWidth, contentHeight, contentRatio, surfaceRatio;

   // Output variable holding the result
   var dimensions = { width: 0, height: 0 };


   surfaceWidth = 30; // outer divs assigned width in mm
   surfaceHeight = 14; // outer divs assigned height in mm
   contentWidth = 600; // inner divs real width in px
   contentHeight = 196; // inner divs real height in px

   scale = 0.8; // Can have a value between 0.1 - 1.0

   contentRatio = contentWidth > contentHeight ? contentHeight / contentWidth : contentWidth / contentHeight; // Assuming this is needed in the calculation.
   surfaceRatio = surfaceWidth > surfaceHeight ? surfaceHeight / surfaceWidth : surfaceWidth / surfaceHeight; // Assuming this is needed in the calculation.

  // Calculate stuff here and return calculated dimensions

  return dimensions;

}

Answer 1

You could try to do the folowing:

Add a div in your view with width = 100mm

<div style="width:100mm;height:0" id="measure">

Maybe you have to set z-index or bg-color to make the div invisible. Now you can calculate the count of pixels per mm on the device like this:

let pxPerMm = document.getElementById('measure').offsetWidth / 100;