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

casey · web-flow · commit cf02bb8ec20a · 2024-02-19T23:46:13.000Z
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>

Original file line number	Diff line number	Diff line change
`@@ -25,6 +25,7 @@`
`25`	`25`	`width: 100%;`
`26`	`26`	`}`
`27`	`27`	`</style>`
	`28`	`+ <script src=/static/preview-image.js type=module defer></script>`
`28`	`29`	`</head>`
`29`	`30`	`<body>`
`30`	`31`	`<img src=/content/{{self.inscription_id}}></img>`