fix: SVGs loaded with white space in container

lokesh · Feb 21, 2023 · c660d93 · c660d93
1 parent 05f3f91
commit c660d93
Showing 1 changed file with 42 additions and 29 deletions.
diff --git a/src/js/lightbox.js b/src/js/lightbox.js
@@ -309,6 +309,9 @@
 
       $image.width(preloader.width);
       $image.height(preloader.height);
+
+      var aspectRatio = preloader.width / preloader.height;
+
       windowWidth = $(window).width();
       windowHeight = $(window).height();
 
@@ -320,44 +323,54 @@
       /*
       Since many SVGs have small intrinsic dimensions, but they support scaling
       up without quality loss because of their vector format, max out their
-      size.
+      size inside the viewport.
       */
       if (filetype === 'svg') {
-        $image.width(maxImageWidth);
-        $image.height(maxImageHeight);
-      }
-
-      // Fit image inside the viewport.
-      if (self.options.fitImagesInViewport) {
-
-        // Check if image size is larger then maxWidth|maxHeight in settings
-        if (self.options.maxWidth && self.options.maxWidth < maxImageWidth) {
-          maxImageWidth = self.options.maxWidth;
-        }
-        if (self.options.maxHeight && self.options.maxHeight < maxImageHeight) {
-          maxImageHeight = self.options.maxHeight;
+        if (aspectRatio >= 1) {
+          imageWidth = maxImageWidth;
+          imageHeight = parseInt(maxImageWidth / aspectRatio, 10);
+        } else {
+          imageWidth = parseInt(maxImageHeight / aspectRatio, 10);
+          imageHeight = maxImageHeight;
         }
+        $image.width(imageWidth);
+        $image.height(imageHeight);
 
       } else {
-        maxImageWidth = self.options.maxWidth || preloader.width || maxImageWidth;
-        maxImageHeight = self.options.maxHeight || preloader.height || maxImageHeight;
-      }
 
-      // Is the current image's width or height is greater than the maxImageWidth or maxImageHeight
-      // option than we need to size down while maintaining the aspect ratio.
-      if ((preloader.width > maxImageWidth) || (preloader.height > maxImageHeight)) {
-        if ((preloader.width / maxImageWidth) > (preloader.height / maxImageHeight)) {
-          imageWidth  = maxImageWidth;
-          imageHeight = parseInt(preloader.height / (preloader.width / imageWidth), 10);
-          $image.width(imageWidth);
-          $image.height(imageHeight);
+        // Fit image inside the viewport.
+        if (self.options.fitImagesInViewport) {
+
+          // Check if image size is larger then maxWidth|maxHeight in settings
+          if (self.options.maxWidth && self.options.maxWidth < maxImageWidth) {
+            maxImageWidth = self.options.maxWidth;
+          }
+          if (self.options.maxHeight && self.options.maxHeight < maxImageHeight) {
+            maxImageHeight = self.options.maxHeight;
+          }
+
         } else {
-          imageHeight = maxImageHeight;
-          imageWidth = parseInt(preloader.width / (preloader.height / imageHeight), 10);
-          $image.width(imageWidth);
-          $image.height(imageHeight);
+          maxImageWidth = self.options.maxWidth || preloader.width || maxImageWidth;
+          maxImageHeight = self.options.maxHeight || preloader.height || maxImageHeight;
+        }
+
+        // Is the current image's width or height is greater than the maxImageWidth or maxImageHeight
+        // option than we need to size down while maintaining the aspect ratio.
+        if ((preloader.width > maxImageWidth) || (preloader.height > maxImageHeight)) {
+          if ((preloader.width / maxImageWidth) > (preloader.height / maxImageHeight)) {
+            imageWidth  = maxImageWidth;
+            imageHeight = parseInt(preloader.height / (preloader.width / imageWidth), 10);
+            $image.width(imageWidth);
+            $image.height(imageHeight);
+          } else {
+            imageHeight = maxImageHeight;
+            imageWidth = parseInt(preloader.width / (preloader.height / imageHeight), 10);
+            $image.width(imageWidth);
+            $image.height(imageHeight);
+          }
         }
       }
+
       self.sizeContainer($image.width(), $image.height());
     };