Adding objectFit property

src/lib/Cropper.svelte

@@ -2,7 +2,7 @@
  import { createEventDispatcher, onDestroy, onMount } from 'svelte'
  import type { HTMLImgAttributes } from 'svelte/elements'
  import * as helpers from './helpers'
- import type { Point, CropShape, Size, DispatchEvents, ImageSize } from './types'
+ import type { Point, CropShape, Size, DispatchEvents, ImageSize, ObjectFit } from './types'
 
  export let image: string
  export let crop: Point = { x: 0, y: 0 }
@@ -17,6 +17,7 @@
  export let crossOrigin: HTMLImgAttributes['crossorigin'] = null
  export let restrictPosition = true
  export let tabindex: number | undefined = undefined
+ export let objectFit: ObjectFit = 'contain'
 
  let cropperSize: Size | null = null
  let imageSize: ImageSize = { width: 0, height: 0, naturalWidth: 0, naturalHeight: 0 }
@@ -29,6 +30,7 @@
  let rafDragTimeout: number | null = null
  let rafZoomTimeout: number | null = null
 
+ const imageObjectFitClass = {"contain": 'image_contain', "horizontal-cover": "image_horizontal_cover", 'vertical-cover': "image_vertical_cover"};
  const dispatch = createEventDispatcher<DispatchEvents>()
 
  onMount(() => {
@@ -243,6 +245,7 @@
 
  // when zoom changes, we recompute the cropped area
  $: zoom && emitCropData()
+ $: classes = 'image ' + imageObjectFitClass[objectFit];
 </script>
 
 <svelte:window on:resize={computeSizes} />
@@ -258,7 +261,7 @@
 >
  <img
  bind:this={imgEl}
- class="image"
+ class={classes}
  src={image}
  on:load={onImgLoad}
  alt=""
@@ -287,20 +290,34 @@
  user-select: none;
  touch-action: none;
  cursor: move;
+ display: flex;
+ justify-content: center;
+ align-items: center;
  }
 
  .image {
- max-width: 100%;
- max-height: 100%;
- margin: auto;
- position: absolute;
- top: 0;
- bottom: 0;
- left: 0;
- right: 0;
  will-change: transform;
  }
 
+ .image_contain {
+ max-width: 100%;
+ max-height: 100%;
+ margin: auto;
+ position: absolute;
+ top: 0;
+ bottom: 0;
+ left: 0;
+ right: 0;
+ }
+ .image_horizontal_cover {
+ width: 100%;
+ height: auto;
+ }
+ .image_vertical_cover {
+ width: auto;
+ height: 100%;
+ }
+
  .cropperArea {
  position: absolute;
  left: 50%;

src/lib/helpers.ts

@@ -57,7 +57,7 @@ export function getDistanceBetweenPoints(pointA: Point, pointB: Point) {
  * Compute the output cropped area of the image in percentages and pixels.
  * x/y are the top-left coordinates on the src image
  * @param crop x/y position of the current center of the image
- * @param imageSize width/height of the src image (default is size on the screen, natural is the original size)
+ * @param imgSize width/height of the src image (default is size on the screen, natural is the original size)
  * @param cropSize width/height of the crop area
  * @param aspect aspect value
  * @param zoom zoom value

src/lib/types.ts

@@ -1,4 +1,5 @@
 export type CropShape = 'rect' | 'round'
+export type ObjectFit = 'contain' | 'horizontal-cover' | 'vertical-cover'
 
 export interface Size {
  width: number