计算以毫米为单位的内部div宽度/高度（相对于以毫米为单位的已知宽度/高度的外部div）。

Question

1. 我有一个外部div，其宽度/高度以mm为单位。 （mm只是分配的值，不用于渲染）。
2. 在它里面，我有另一个div，其实际宽度/高度以px为单位。
3. 两个div可以具有不同的比率。

我想要做的是计算以mm为单位的内部div宽度/高度。 使用JavaScript，并且还要考虑规模。

示例1：指定的外部div宽度/高度为30x30mm，比例为0.8，内部div的宽度/高度（以px为单位）为600x600px，结果应为24x24mm。

示例2：指定的外部div宽度/高度为60x30mm，比例为1.0，内部div的宽度/高度（以px为单位）为300x600px，结果应为15x30mm。

以毫米为单位的外部div宽度/高度被认为是最大尺寸。

猜猜这很容易，但是div /曲面可以具有不同的比率这一事实使我感到复杂。

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

您可以尝试执行以下操作：

在视图中添加宽度为100mm的div

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

也许您必须设置z-index或bg-color才能使div不可见。 现在，您可以像这样计算设备上每毫米的像素数：

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