Fixing zooming and recentering of image in resource viewer

2 files changed, 6 insertions, 7 deletions

diff --git a/src/vs/workbench/browser/parts/editor/media/resourceviewer.css b/src/vs/workbench/browser/parts/editor/media/resourceviewer.css
index 308e97b5c93..54dac885b18 100644
--- a/src/vs/workbench/browser/parts/editor/media/resourceviewer.css
+++ b/src/vs/workbench/browser/parts/editor/media/resourceviewer.css
@@ -16,11 +16,8 @@
 	padding: 10px 10px 0 10px;
 	background-position: 0 0, 8px 8px;
 	background-size: 16px 16px;
-	display: grid;
-}
-
-.monaco-resource-viewer.image.full-size {
-	padding: 0;
+	display: flex;
+	box-sizing: border-box;
 }
 
 .vs .monaco-resource-viewer.image {
@@ -41,11 +38,12 @@
 
 .monaco-resource-viewer img.scale-to-fit {
 	max-width: 100%;
+	max-height: 100%;
 	object-fit: contain;
 }
 
 .monaco-resource-viewer img {
-	margin: auto; /* centers the image */
+	margin: auto;
 }
 
 .monaco-resource-viewer.zoom-in {
diff --git a/src/vs/workbench/browser/parts/editor/resourceViewer.ts b/src/vs/workbench/browser/parts/editor/resourceViewer.ts
index 35a961c698a..4e3d9571b6d 100644
--- a/src/vs/workbench/browser/parts/editor/resourceViewer.ts
+++ b/src/vs/workbench/browser/parts/editor/resourceViewer.ts
@@ -385,6 +385,7 @@ class InlineImageView {
 				scale = 'fit';
 				img.addClass('scale-to-fit');
 				img.removeClass('pixelated');
+				img.style('min-width', 'auto');
 				img.style('width', 'auto');
 				InlineImageView.imageStateCache.set(cacheKey, null);
 			} else {
@@ -403,8 +404,8 @@ class InlineImageView {
 				const dy = (scrollTop + imgElement.parentElement.clientHeight / 2) / imgElement.parentElement.scrollHeight;
 
 				img.removeClass('scale-to-fit');
+				img.style('min-width', `${(imgElement.naturalWidth * scale)}px`);
 				img.style('width', `${(imgElement.naturalWidth * scale)}px`);
-				img.style('height', 'auto');
 
 				const newWidth = imgElement.width;
 				const scaleFactor = (newWidth - oldWidth) / oldWidth;