Leahnaya/hackdex-website
1
0
Fork 0
mirror of https://github.com/Hackdex-App/hackdex-website.git synced 2026-03-21 17:54:09 -05:00
Code Issues Actions Packages Projects Releases Wiki Activity

Fix scaling issues with PixelImage

Browse Source
This commit is contained in:
Jared Schoeny 2025-10-21 22:23:21 -10:00
parent bcbeeac6ee
commit bfa29d239f
1 changed files with 2 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
src/components/PixelImage.tsx
View File

@ -60,20 +60,18 @@ export default function PixelImage({ src, alt, mode = "cover", className = "", i
const ih = naturalSize.height;
const cw = containerSize.width;
const ch = containerSize.height;
const dpr = devicePixelRatioState || 1;
if (iw <= 0 || ih <= 0 || cw <= 0 || ch <= 0) return 1;
const scaleX = cw / iw;
const scaleY = ch / ih;
const step = 1 / dpr; // CSS-px step that maps to 1 device pixel increment
if (mode === "cover") {
const required = Math.max(scaleX, scaleY);
// Snap UP to the nearest step to ensure we cover the container
return Math.max(step, Math.ceil(required * dpr) / dpr);
return Math.max(1, Math.ceil(required));
}
// contain
const allowed = Math.min(scaleX, scaleY);
// Snap DOWN to nearest step to avoid overflow
return Math.max(step, Math.floor(allowed * dpr) / dpr);
return Math.max(1, Math.floor(allowed));
}, [naturalSize, containerSize, mode, devicePixelRatioState]);
const widthPx = naturalSize.width > 0 ? naturalSize.width * scale : undefined;