Fix clamping for different fit than cover and don't clamp SVGs by default

Author: Tofandel

src/handlers/handlers.ts

@@ -94,8 +94,9 @@ export const resize: Handler = {
       height = width;
     }
     // sharp's `withoutEnlargement` doesn't respect the requested aspect ratio, so we need to do it ourselves
-    if (!context.enlarge) {
-      const clamped = clampDimensionsPreservingAspectRatio(context.meta, {
+    // By default don't clamp svgs unless explicitly desired with enlarge=false
+    if (context.meta.type === 'svg' ? context.enlarge === false : !context.enlarge) {
+      const clamped = clampDimensionsPreservingAspectRatio(context.fit, context.meta, {
         width,
         height,
       });

src/handlers/utils.ts

@@ -35,19 +35,28 @@ export function applyHandler(
 }
 
 export function clampDimensionsPreservingAspectRatio(
+  fit: HandlerContext['fit'],
   sourceDimensions: ImageMeta,
   desiredDimensions: { width: number; height: number },
 ) {
   const desiredAspectRatio = desiredDimensions.width / desiredDimensions.height;
+  const sourceAspectRatio = sourceDimensions.width / sourceDimensions.height;
   let { width, height } = desiredDimensions;
   if (sourceDimensions.width && width > sourceDimensions.width) {
-    width = sourceDimensions.width;
-    height = Math.round(sourceDimensions.width / desiredAspectRatio);
+    if (['contain', 'fill', 'inside'].includes(fit) && sourceAspectRatio < desiredAspectRatio) {
+      width = Math.round(height * desiredAspectRatio)
+    } else {
+      width = sourceDimensions.width;
+      height = Math.round(sourceDimensions.width / desiredAspectRatio);
+    }
   }
   if (sourceDimensions.height && height > sourceDimensions.height) {
-    height = sourceDimensions.height;
-    width = Math.round(sourceDimensions.height * desiredAspectRatio);
+    if (['contain', 'fill', 'inside'].includes(fit) && sourceAspectRatio > desiredAspectRatio) {
+      height = Math.round(width / desiredAspectRatio);
+    } else {
+      height = sourceDimensions.height;
+      width = Math.round(sourceDimensions.height * desiredAspectRatio);
+    }
   }
-
   return { width, height };
 }

test/handlers/utils.test.ts

@@ -22,12 +22,46 @@ describe("utils", () => {
   });
 
   it("clampDimensionsPreservingAspectRatio", () => {
-    const sourceDimensions = { width: 200, height: 100 };
-    const desiredDimensions = { width: 300, height: 150 };
-    const result = clampDimensionsPreservingAspectRatio(
-      sourceDimensions,
-      desiredDimensions,
-    );
-    expect(result).toEqual({ width: 200, height: 100 });
+    const dimensions = [
+      {
+        source: [200, 100],
+        desired: [300, 150],
+        expected: [200, 100],
+      },
+      {
+        source: [200, 150],
+        desired: [150, 200],
+        expected: [113, 150],
+      },
+      {
+        source: [150, 200],
+        desired: [200, 150],
+        expected: [150, 113],
+      },
+      {
+        source: [211, 40],
+        desired: [170, 170, "contain"],
+        expected: [170, 170],
+      },
+      {
+        source: [211, 40],
+        desired: [220, 110, "contain"],
+        expected: [211, 106],
+      },
+      {
+        source: [40, 211],
+        desired: [110, 220, "contain"],
+        expected: [106, 211],
+      },
+    ];
+
+    for (const d of dimensions) {
+      const result = clampDimensionsPreservingAspectRatio(
+        d.desired[2] ?? null,
+        { width: d.source[0], height: d.source[1] },
+        { width: d.desired[0], height: d.desired[1] },
+      );
+      expect(result).toEqual({ width: d.expected[0], height: d.expected[1] });
+    }
   });
 });