bugfix: svg images not displayed properly

MSzturc · Aug 30, 2022 · ae32b1d · ae32b1d
1 parent 5a5e290
commit ae32b1d
Show file tree

Hide file tree

Showing 4 changed files with 9 additions and 5 deletions.
diff --git 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
@@ -239,15 +239,15 @@ 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\\" -->
 <div class=\\"reset-margin\\" style=\\"position: absolute; left: 0px; top: 0px; height: 700px; width: 960px; min-height: 700px; display: flex; flex-direction: column; align-items: center; justify-content: center\\" absolute=\\"true\\">
 
 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
@@ -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
@@ -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>"
 `;
-Original file line number
+Diff line change
@@ Expand Up / @@ -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>"
     `;
@@ Expand Down @@