Image resizing with Markdown assumes height = width and distorts image

[maubuz]

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">

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">

This would be consistent with the Docsify documentation for resizing images with Markdown. 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.

• 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

[anikethsaha]

Seems
like a bug . It should be

  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

[maubuz]

Thanks for the quick response. I've checked the example :size=100 and resizing looks as expected.
PR #1065 submitted.