FabricJS scale image to fit width / size

Question

How do i scale image to fit the container size correctly? I want a grid of two images and each image to fit the provided size.

https://codepen.io/peteringram0/pen/gebYWo?editors=0010

img.set({
    left: 0,
    top: 0,
    width: 300,
    height: 300
    // Scale image to fit width / height ?
 });

EDIT: Sorry i didn't explain my question very clearly. Im looking to position it within the grid but as a 'cover' type. https://codepen.io/peteringram0/pen/xWwZmy?editors=0011. E.g. in the link there are 4 images in a grid but the images are in the centre and are overflowing. I want to get each of the images vertically centred with no overflow outside the set size. Thanks (x should be in the centre, while keeping the aspect ratio)

If you were looking to have responsive objects within objects, I just solved it here: stackoverflow.com/questions/58719714/… — LatentDenis
– LatentDenis, Commented Nov 6, 2019 at 20:35

Meekohi · Accepted Answer · 2020-01-11 15:46:17Z

52

If you want to scale image object to given width or height, use scaleToWidth and scaleToHeight respectively.

I've removed the height and width specified inside img.set function from your code. And added a scaeToHeight and scaleToWidth method. Use the code as below.

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

Check out this fiddle: https://jsfiddle.net/hazeebp/195uan6f/1/

edited Jan 11, 2020 at 15:46

Meekohi

11k6 gold badges52 silver badges60 bronze badges

answered Mar 9, 2018 at 20:47

Abdul Haseeb

86310 silver badges20 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Peter I Over a year ago

Thanks for your post. I have edited my post above. Sorry i did not make this more clear when posting before.

Stanley Shauro Over a year ago

let scale = Math.min(300 / img.width, 300 / img.height) img.scale(scale) canvas.add(img) But! This works OK if the angle is 0.

Collectives™ on Stack Overflow

FabricJS scale image to fit width / size

1 Answer 1

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related