From ae32b1d3d6c0392f63f357d5bd6ac9008941ef12 Mon Sep 17 00:00:00 2001
From: MSzturc <MSzturc@googlemail.com>
Date: Tue, 30 Aug 2022 23:01:36 +0200
Subject: [PATCH] bugfix: svg images not displayed properly

---
 src/processors/imageProcessor.ts                    | 4 ++++
 test/__snapshots__/basicSyntax.unit.test.ts.snap    | 4 ++--
 test/__snapshots__/extendedSyntax.unit.test.ts.snap | 4 ++--
 test/__snapshots__/gridComponent.unit.test.ts.snap  | 2 +-
 4 files changed, 9 insertions(+), 5 deletions(-)

diff --git a/src/processors/imageProcessor.ts b/src/processors/imageProcessor.ts
index 2303f104..7144252f 100644
--- a/src/processors/imageProcessor.ts
+++ b/src/processors/imageProcessor.ts
@@ -135,6 +135,10 @@ export class ImageProcessor {
 					filePath = this.transformAbsoluteFilePath(filePath);
 				}
 
+				if (comment.hasStyle('width')) {
+					comment.addStyle('object-fit', 'fill');
+				}
+
 				if (!comment.hasStyle('align-self')) {
 					if (comment.hasAttribute('align')) {
 
diff --git a/test/__snapshots__/basicSyntax.unit.test.ts.snap b/test/__snapshots__/basicSyntax.unit.test.ts.snap
index 9eb2efac..43861f37 100644
--- a/test/__snapshots__/basicSyntax.unit.test.ts.snap
+++ b/test/__snapshots__/basicSyntax.unit.test.ts.snap
@@ -239,7 +239,7 @@ Insert image with obsidian markdown syntax
 
 Scale image to a width of 100 px
 
-<img src=\\"/documentation/Image.jpg\\" alt=\\"\\" style=\\"width: 100px; object-fit: scale-down\\">
+<img src=\\"/documentation/Image.jpg\\" alt=\\"\\" style=\\"width: 100px; object-fit: fill\\">
 </div>
 ---
 <!-- .slide: class=\\"drop\\" -->
@@ -247,7 +247,7 @@ Scale image to a width of 100 px
 
 Scale image to a width of 300x100 px
 
-<img src=\\"/documentation/Image.jpg\\" alt=\\"\\" style=\\"object-fit: cover; width: 300px; height: 100px\\">
+<img src=\\"/documentation/Image.jpg\\" alt=\\"\\" style=\\"object-fit: fill; width: 300px; height: 100px\\">
 </div>"
 `;
 
diff --git a/test/__snapshots__/extendedSyntax.unit.test.ts.snap b/test/__snapshots__/extendedSyntax.unit.test.ts.snap
index e4dcd800..eb4f9b6f 100644
--- a/test/__snapshots__/extendedSyntax.unit.test.ts.snap
+++ b/test/__snapshots__/extendedSyntax.unit.test.ts.snap
@@ -171,9 +171,9 @@ exports[`Extended Markdown Syntax >  Excalidraw support 1`] = `
 
 #### Excalidraw support
 
-<img src=\\"path/to/Sample.excalidraw.svg\\" alt=\\"\\" style=\\"width: 100px; object-fit: scale-down\\">
+<img src=\\"path/to/Sample.excalidraw.svg\\" alt=\\"\\" style=\\"width: 100px; object-fit: fill\\">
 
-<img src=\\"path/to/Sample.excalidraw.svg\\" alt=\\"\\" style=\\"width: 300px; height: 400px; object-fit: scale-down\\">
+<img src=\\"path/to/Sample.excalidraw.svg\\" alt=\\"\\" style=\\"width: 300px; height: 400px; object-fit: fill\\">
 </div>"
 `;
 
diff --git a/test/__snapshots__/gridComponent.unit.test.ts.snap b/test/__snapshots__/gridComponent.unit.test.ts.snap
index c9625b57..f884d612 100644
--- a/test/__snapshots__/gridComponent.unit.test.ts.snap
+++ b/test/__snapshots__/gridComponent.unit.test.ts.snap
@@ -328,7 +328,7 @@ exports[`Grid Component > Attributes > Padding 1`] = `
 
 <div class=\\"has-light-background reset-margin\\" style=\\"background-color: orange; padding: 20px; box-sizing: border-box; position: absolute; left: 50%; top: 50%; height: 50%; width: 50%; display: flex; flex-direction: column; align-items: center; justify-content: center\\" >
 
-<img src=\\"/documentation/Image.jpg\\" alt=\\"\\" style=\\"width: 800px; object-fit: scale-down\\">
+<img src=\\"/documentation/Image.jpg\\" alt=\\"\\" style=\\"width: 800px; object-fit: fill\\">
 </div>
 </div>"
 `;