Locks zoom/scroll and aspect ratio.

BusyBird15 · Dec 13, 2024 · 4d2eaec · 4d2eaec
1 parent a48470e
commit 4d2eaec
Showing 1 changed file with 7 additions and 5 deletions.
diff --git a/utility-pages/transparent-svg.html b/utility-pages/transparent-svg.html
@@ -2,7 +2,7 @@
 <html lang="en">
 <head>
     <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
     <title>Load SVG Image</title>
     <style>
         body, html {
@@ -11,19 +11,21 @@
             height: 100%;
             width: 100%;
             background: transparent;
-            overflow: hidden;
+            overflow: hidden; /* Disable scrolling */
         }
         #imageContainer {
             height: 100%;
             width: 100%;
+            display: flex;
+            justify-content: center;
+            align-items: center;
             position: absolute;
             top: 0;
             left: 0;
         }
         img {
-            height: 100%;
-            width: 100%;
-            object-fit: fill; /* This will disregard the aspect ratio */
+            max-height: 100%;
+            max-width: 100%;
         }
     </style>
 </head>