Canvas FabricJS缩放图像以适应宽度/大小

如何缩放图像以正确匹配容器大小？我想要一个网格的两个图像和每个图像适合提供的大小

---

编辑：对不起，我没有很清楚地解释我的问题。我希望将其定位在网格内，但作为“覆盖”类型。例如，在链接中，网格中有4个图像，但图像位于中心且溢出。我想让每个图像垂直居中，没有溢出超出设置的大小。谢谢（x应该在中间，同时保持纵横比）

如果要将图像对象缩放到给定的宽度或高度，请分别使用和

我已经从代码中删除了img.set函数中指定的高度和宽度。并添加了scaeToHeight和scaleToWidth方法。 使用下面的代码

window.fabric.Image.fromURL(imgUrl, (img) => {
  img.set({
    left: 300,
    top: 0
  });
  img.scaleToHeight(300);
  img.scaleToWidth(300);
  canvas.add(img);
})

---

看看这把小提琴：

谢谢你的帖子。我已经编辑了上面的帖子。很抱歉，我以前在发布时没有更清楚地说明这一点。如果您希望在对象中包含响应对象，我只是在这里解决了这个问题：

window.fabric.Image.fromURL(imgUrl, (img) => {
  img.set({
    left: 300,
    top: 0
  });
  img.scaleToHeight(300);
  img.scaleToWidth(300);
  canvas.add(img);
})