164

I'm trying to post a picture to a file on my Gitlab using markdown

    ![](test/media/screenshot.png)

seems to work but is far too large. Other solutions I've tried and don't seem to work are as follows:

    <img src="https://gitlab.com/example/screenshot" width="48">
    ![](test/media/screenshot.png =100x20)
    ![](test/media/screenshot.png =250x)
    <img src="https://gitlab.com/example/screenshot" alt="Drawing" style="width: 200px;"/>

Any ideas on what I can do rather than re-sizing every image I have?

Ben Kelly
  • 1,641
  • 2
  • 7
  • 4

3 Answers3

224

Raw HTML works
Try the following: after uploading your image, use img tag with src pointing to the path of uploaded image, for me it's working:
The following is from one of my files

![](/uploads/d19fcc3d3b4d313c8cd7960a343463b6/table.png)
<img src="/uploads/d19fcc3d3b4d313c8cd7960a343463b6/table.png"  width="120" height="120">

enter image description here

Check this link, where I've put different size of same image https://gitlab.com/Basel.issmail/resize-image/wikis/resizing-image

There is an issue on gitlab discuss Add control over images with Markdown

Kos
  • 4,890
  • 9
  • 38
  • 42
Basel Issmail
  • 3,847
  • 7
  • 20
  • 36
  • Since this week, they add borders and padding to all `img` elements that are not emoji, which is highly annoying. Filed an issue [here](https://gitlab.com/gitlab-org/csslab/issues/64). – MS Berends Dec 14 '18 at 14:36
  • 22
    I wanted to show the thumbnail image with the possibility to download the original image. This works `[](/uploads/9177bb9d710cdfd0288b9ce151e4bcb5/image.png)` The downside is that gitlab shows the paperclip and border and while loading the image there is a blank box in the original size, but for my case thats sufficient. – Jürgen Steinblock Sep 18 '19 at 11:12
  • 8
    Thanks. I've used only "img" tag and deleted the original markdown line. (first line abve "img") Solved my case. :+1: – csonuryilmaz Apr 30 '20 at 05:56
  • 24
    For those who want to use the percentage: `` – Herpes Free Engineer Jan 02 '21 at 10:35
  • 3
    Using the style attribute doesn't have an effect (anymore?) – Alex Feb 22 '22 at 07:59
  • As @csonuryilmaz points out, I'm not why/if/when the markdown and the HTML is needed. – Joel Mellon Jul 08 '22 at 19:03
  • `style="..."` doesn't work, it's been sanitized: https://github.com/gjtorikian/html-pipeline/blob/v2.12.3/lib/html/pipeline/sanitization_filter.rb#L42 – Eric Sep 22 '22 at 07:04
  • 2
    Following code give good result: ![]() It shows a clickable thumbail with a fixed width (and keep ratio image). – quent Oct 19 '22 at 07:34
  • This answer is more up-to-date, using a feature introduced in GitLab 15.7: https://stackoverflow.com/a/74906593/9778755 – Stefan_EOX Jan 27 '23 at 15:53
63

GitLab 15.7 (December 2022) adds an official support for this:

Change the dimensions of images in Markdown

Before this release, there were no controls for changing the size of images rendered within Markdown text areas.
This often led to unwieldy images with no control over how much space they took up in descriptions and comments.

You can now set the width and height of how images are rendered directly in Markdown by appending the {width=x height=y} attributes to the image reference. Sizes can be specified with pixels or percentages.

See Documentation and Issue.

Example:

![image](/uploads/cf5da4685999975fef9afd1aa43b9173/image.png){width=40%}
![image](/uploads/cf5da4685999975fef9afd1aa43b9173/image.png){height=250px}
jozxyqk
  • 16,424
  • 12
  • 91
  • 180
VonC
  • 1,262,500
  • 529
  • 4,410
  • 5,250
8

Following code give good result: (the URL set in tag is the one generated by Gitlab when attaching a image)

![]() <img src="/uploads/d19fcc3d3b4d313c8cd7960a343463b6/table.png" width="120">

It shows a clickable thumbail with a fixed width (and keep image ratio).

quent
  • 1,936
  • 1
  • 23
  • 28