Loader option `fit` does not work

Describe the bug

When I try to load an image which is rectangular and crop it to square:

<Image
  alt=""
  options={{
    fit: ImageFit.COVER,
  }}
  responsive={[
    {
      maxWidth: 800,
      size: {
        height: 800,
        width: 800,
      },
    },
  ]}
  src="https://images.unsplash.com/photo-1655241459367-c95abd34d0bc"
/>

It does not work, the image is distorted, it is not cropped. This part in url &width=800&height=800&fit=cover does not give me anything. On the other hand it works on unsplash (&fit=crop&w=500&h=500&q=80): https://images.unsplash.com/photo-1655241459367-c95abd34d0bc?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=500&h=500&q=80

What I do wrong? 😃

Your Example Website or App

No response

Steps to Reproduce the Bug or Issue

Try to create <Image /> with option fit: ImageFit.COVER. Inspect the image. It is not cropped.

Expected behavior

When we use fit: ImageFit.COVER and provided size of an image is different from its own ratio - it should be cropped.

Screenshots or Videos

Platform

• OS: [e.g. macOS, Windows, Linux]
• Browser: [e.g. Chrome, Safari, Firefox]
• Version: [e.g. 91.1]

Additional context

No response

[Josh-McFarlin]

@tomekrozalski Just wanted to mention that I incorporated changes into the latest releases of js-image-lib and Remix-Image to support fit and position in pureTransformer, so they can be used on all environments, not just those that support using Sharp

[Josh-McFarlin]

export interface CropOptions {
  /** The x position of the upper left pixel. */
  x: number;
  /** The y position of the upper left pixel. */
  y: number;
  /** The number of pixels wide to crop the image. */
  width: number;
  /** The number of pixels high to crop the image. */
  height: number;
}