将 Wrapper+Canvas+Div 匹配到图像的大小

Question

我在 Google Apps 脚本中使用 heatmap.js，我正在尝试调整热图画布的大小（我可以在其中实际绘制点）以适合图像。如何更改 javascript 或样式以使其正常工作？代码：https ://jsfiddle.net/nateomardavis/51h2guL9/有wrapper黑色边框。热图div有蓝色边框。有canvas一个红色边框。它应该如何工作：我应该能够在图像上的任何位置标记热图。包装器、热图 div 和画布都应根据图像的大小调整大小。目前如何工作：我只能在蓝/黑边框内标记热图。我的 javascript 调整画布大小以适应图像，但不调整热图的边界。我尝试过的内容：您可以在小提琴中看到我是如何尝试更改 javascript 调整大小的（第 88-90 行）。我还考虑过使用图像作为div 的大小，但大小background-image不是heatmap正确，我希望能够将热图和图像保存为一层（用于打印/保存）。我还尝试更改图像的大小（第 101 行），但任何超过 55% 的东西都会切断图像。下面的屏幕截图仅供参考，但完整的工作代码在小提琴中。我把它全部放在 HTML 下，因为这就是它在 Google Apps 脚本中的工作方式。

Answer 1

经过大量的修补，我能够弄清楚：https ://jsfiddle.net/nateomardavis/p1kwrhmv

1. 我用CSSimg给了它一个。background-image

2. 然后我将热图图层设置为relative，并将图像图层设置为absolute使用解决方案HERE。

3. 最后，我使用HERE概述的方法设置图像层 css 。

.heatmap {

  background-size: contain;

  background-repeat: no-repeat;

  width: 100%;

  height: 300%; /*if the image is bigger than screen, this is needed */

  position: relative;

}

.backgroundIMG {

  background-image: url('https://upload.wikimedia.org/wikipedia/commons/thumb/8/82/Soccer_Field_Transparant.svg/1200px-Soccer_Field_Transparant.svg.png');

  background-size: contain;

  background-repeat: no-repeat;

  position: absolute;

  width: 100%;

  height: 0;

  padding-top: 151.33%;

}