計算以毫米為單位的內部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;