Use image-rendering: auto when downscaling images (#3144)

ordinals · Feb 19, 2024 · cf02bb8 · cf02bb8
1 parent e40bcd1
commit cf02bb8
Show file tree

Hide file tree

Showing 2 changed files with 16 additions and 0 deletions.
diff --git a/static/preview-image.js b/static/preview-image.js
@@ -0,0 +1,15 @@
+function resize() {
+  if (
+    body.clientWidth * window.devicePixelRatio < img.naturalWidth
+    || body.clientHeight * window.devicePixelRatio < img.naturalHeight
+  ) {
+    body.style.imageRendering = 'auto';
+  } else {
+    body.removeAttribute('style');
+  }
+}
+
+let body = document.body;
+let img = document.getElementsByTagName('img')[0];
+
+(new ResizeObserver(resize)).observe(body);
diff --git a/templates/preview-image.html b/templates/preview-image.html
@@ -25,6 +25,7 @@
         width: 100%;
       }
     </style>
+    <script src=/static/preview-image.js type=module defer></script>
   </head>
   <body>
     <img src=/content/{{self.inscription_id}}></img>