From 91826e61d866ab5bb7df59ac69d33400b975473d Mon Sep 17 00:00:00 2001 From: yogeshwaran-c Date: Thu, 26 Mar 2026 06:26:00 +0530 Subject: [PATCH] fix: enable zoom for SVGs without explicit width/height dimensions SVG images that rely solely on a viewBox attribute (without explicit width/height) could not be zoomed in the image preview because they have no intrinsic dimensions. CSS zoom had no effect since the SVG would simply re-render to fill whatever container size it was given. - Set explicit minWidth/minHeight on the image element when naturalWidth/naturalHeight are 0, giving CSS zoom concrete pixel dimensions to scale - Handle firstZoom() division by zero when naturalWidth is 0 by defaulting to scale 1x - Clear explicit dimensions when returning to scale-to-fit mode Fixes #240638 --- .../media-preview/media/imagePreview.js | 23 ++++++++++++++++++- 1 file changed, 22 insertions(+), 1 deletion(-) diff --git a/extensions/media-preview/media/imagePreview.js b/extensions/media-preview/media/imagePreview.js index d31728e76bc..91338ba0bc3 100644 --- a/extensions/media-preview/media/imagePreview.js +++ b/extensions/media-preview/media/imagePreview.js @@ -89,6 +89,9 @@ image.classList.remove('pixelated'); // @ts-ignore Non-standard CSS property image.style.zoom = 'normal'; + // Clear explicit dimensions so the image can scale-to-fit naturally + image.style.minWidth = ''; + image.style.minHeight = ''; vscode.setState(undefined); } else { scale = clamp(newScale, MIN_SCALE, MAX_SCALE); @@ -102,6 +105,17 @@ const dy = (window.scrollY + container.clientHeight / 2) / container.scrollHeight; image.classList.remove('scale-to-fit'); + + // For images without intrinsic dimensions (e.g. SVGs with only + // a viewBox), set explicit pixel dimensions so that CSS zoom has + // something concrete to scale. + if (!image.naturalWidth || !image.naturalHeight) { + const baseWidth = image.clientWidth || container.clientWidth; + const baseHeight = image.clientHeight || container.clientHeight; + image.style.minWidth = baseWidth + 'px'; + image.style.minHeight = baseHeight + 'px'; + } + // @ts-ignore Non-standard CSS property image.style.zoom = scale; @@ -142,7 +156,14 @@ return; } - scale = image.clientWidth / image.naturalWidth; + if (image.naturalWidth) { + scale = image.clientWidth / image.naturalWidth; + } else { + // For images without intrinsic dimensions (e.g. SVGs with + // only a viewBox), start at 1x since there is no meaningful + // natural size to compute a ratio from. + scale = 1; + } updateScale(scale); }