[need help] how to let backgroundImage autofit container ?

[vaynevayne]

I want the picture to be scaled and displayed in full. What scale should I set?

https://stackblitz.com/edit/vitejs-vite-eyhjps?file=src%2FReactFabric%2Fcomponents%2FBackgroundImage%2Findex.tsx

The following my code is a bit of a problem

 const { width, height } = useReactFabric()

   const calcScale = (width: number, height: number) => {
      if (!backgroundImageRef.current) return
      const scale = Math.max(width / backgroundImageRef.current.width, height / backgroundImageRef.current.height)
      backgroundImageRef.current.set('scaleX', scale)
      backgroundImageRef.current.set('scaleY', scale)

      onScaleChange?.(scale)

    }

[asturur]

Fabric exposes 2 utilities, findScaleToFit and findScaleToCover.
They are used in this way

const scale = findScaleToFit(area1, area2)
// scale applied to area1 will make area1 as big as possible to still fit in area2.

const scale = findScaleToCover(area1, area2)
// scale applied to area1 will make area1 as little as possible but still cover the entirety of area2

area1 and area2 needs to be aligned boxes, not rotated with different angles.

check the file 'findScaleTo.ts' in current master

[vaynevayne]

thanks I will try