Repository: docsifyjs/docsify (JavaScript)

Issue:
Image resizing with Markdown assumes height = width and distorts image
<!-- Please don't delete this template or we'll close your issue -->
<!-- Please use English language -->
<!-- Before creating an issue please make sure you are using the latest version of Docsify. -->
<!-- Please ask questions on StackOverflow: https://stackoverflow.com/questions/ask?tags=docsify -->

## Bug Report

#### Steps to reproduce

Resize a rectangular image with Markdown by specifying only a width. Bug started after latest update on March 9th.

`![canoe](assets/canoe.png ':size=200')`

#### What is current behaviour

The rendered html is an image with `width` **and** `height` equal to the width specified in Markdown.

`<img src="/./wk7/assets/canoe.png" data-origin="assets/canoe.png" alt="canoe" width="200" height="200">`

![image](https://user-images.githubusercontent.com/56834690/76418167-865fc180-6374-11ea-9b2d-b5422cd06972.png)


#### What is the expected behaviour

The rendered image to have the `width` as specified in Markdown, and no `height`. This would cause the html to automatically resize the `height` in order to respect its aspect ratio (default html behavior).

`<img src="/./wk7/assets/canoe.png" data-origin="assets/canoe.png" alt="canoe" width="200">`
 
![image](https://user-images.githubusercontent.com/56834690/76418594-4816d200-6375-11ea-8ecb-88f8a30e9e49.png)

   This would be consistent with the [Docsify documentation for resizing images with Markdown](https://docsify.js.org/#/helpers?id=image). The image example in the documentation works because it is nearly a square.

#### Other relevant information

I'm not very familiar with Docsify yet but I believe the bug is caused by image.js between lines 20 and 27:

```
    if (config.size) {
      const [width, height] = config.size.split('x');
      if (height) {
        attrs.push(`width="${width}" height="${height}"`);
      } else {
        attrs.push(`width="${width}" height="${width}"`);
      }
    }
```
If `height="${width}"` is removed from the else statement then the html will fall back to default behavior.

I compiled a local version with the change above and it seemed to fix it. I'm not sure if breaks anything else tho .

Love the project and really appreciate all the work that goes into it.


<!-- (Update "[ ]" to "[x]" to check a box) -->
- [x] Bug does still occur when all/other plugins are disabled?

- Your OS: Fedora 31
- Node.js version: v13.10.1
- npm/yarn version: 6.13.7
- Browser version: Firefox 73 and Chrome 80
- Docsify version: `src="//unpkg.com/docsify/lib/docsify.min.js"`
- Docsify plugins: docsify-themeable, search, docsify-pagination, zoom-image, copy-code

<!-- Love docsify? Please consider supporting our collective:
👉  https://opencollective.com/docsify/donate -->



Discussion:
Seems 
like a bug . It should be 

```js
  if (config.size) {
      const [width, height] = config.size.split('x');
      if (height) {
        attrs.push(`width="${width}" height="${height}"`);
      } else {
        attrs.push(`width="${width}"`);
      }
    }
```

Feel free to submit a fix.  
do check for the behavior when this example - `:size=100` 
Thanks for the quick response. I've checked the example `:size=100` and resizing looks as expected.
PR #1065 submitted.



Patch:
diff --git a/src/core/render/compiler/image.js b/src/core/render/compiler/image.js
index 3cc48c360..982e5e55e 100644
--- a/src/core/render/compiler/image.js
+++ b/src/core/render/compiler/image.js
@@ -22,7 +22,7 @@ export const imageCompiler = ({ renderer, contentBase, router }) =>
       if (height) {
         attrs.push(`width="${width}" height="${height}"`);
       } else {
-        attrs.push(`width="${width}" height="${width}"`);
+        attrs.push(`width="${width}"`);
       }
     }
 


Test patch:
diff --git a/test/unit/render.test.js b/test/unit/render.test.js
index 67d3bcf09..9a7163024 100644
--- a/test/unit/render.test.js
+++ b/test/unit/render.test.js
@@ -168,7 +168,7 @@ text
 
         expectSameDom(
           output,
-          '<p><img src="http://imageUrl" data-origin="http://imageUrl" alt="alt text" width="50" height="50" /></p>'
+          '<p><img src="http://imageUrl" data-origin="http://imageUrl" alt="alt text" width="50" /></p>'
         );
       });
     });