Home / GitHub Page

Resize images

Does anyone know how to resize an imported image?
When an image is included in such that way, markdown code looks like this:

![](:/imageid)

I don’t know how to or if it is possible to resize those images. I tried to add things like
{:height="36px" width="36px"}
but they didn’t worked.

I don’t think this is possible with this version of markdown. You can use html, however.

Thanks for replying. I tried to use html but I don’t know exactly how to write the source location. I tried
<img src="/.resource/imageid" width="120" height="120">
but it does not work.

Are there other solutions than these to resize images (without the use of ‘div’)?

**External image**

<img style="width:200px; border: dashed lime 3px; padding: 1em; background: yellow" src="http://carifinonline.com/wp-content/uploads/2014/11/canstockphoto4906117-e1417378843917.jpg">

---

**Local Image with 'div' and 'style'**

<div style="width:200px; border: dashed lime 3px; padding: 1em; background: yellow">

![Fiat-logo-2006-1920x1080.png](:/87828bdc5576417eb08e70f0ff8efcf8)
</div>

---

**Local Image without style**

![Fiat-logo-2006-1920x1080.png](:/87828bdc5576417eb08e70f0ff8efcf8)

It’s something I’ve been meaning to support for while so it will be in the next version :slight_smile: Then you’ll be able to do:

<img src=":/a92ac34387ff467a8c839d201dcd39aa" width="50"/>

And customise the IMG tag any way you want.

3 Likes

Wouldn’t it be easier to allow the size attribute in markdown? It’s not a standard, but several markdown providers and processors support it.

That makes things more complex actually especially since it’s not standard. It’s simpler to just add support for the :/a92ac... URL format and that way any customisation can be done on the <img/> tag, including borders, padding, float, etc.

No, I meant simpler for the user. :wink:

Now the user has to use HTML instead of markdown. Anyway, I’m happy with the html change. Thanks.

2 Likes

It’d be nice to support Markdown image sizing too, as well as the <img /> tag! Something like:

![](https://gyazo.com/eb5c5741b6a9a16c692170a41a49c858.png | width=100)
![](https://gyazo.com/eb5c5741b6a9a16c692170a41a49c858.png =250x250)

I wonder if it’s a configurable option in the parser/renderer.

1 Like