203

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?

Improve this question
1
  • Use the same approach with <img > as StackOverflow uses Commented Oct 12, 2020 at 19:51

5 Answers 5

Reset to default
236

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

Improve this answer
Sign up to request clarification or add additional context in comments.

11 Comments

I wanted to show the thumbnail image with the possibility to download the original image. This works [<img src="/uploads/9177bb9d710cdfd0288b9ce151e4bcb5/image.png" width="32" height="32">](/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.
Thanks. I've used only "img" tag and deleted the original markdown line. (first line abve "img") Solved my case. :+1:
For those who want to use the percentage: <img src="image.png" width="50%" height="50%" or <img src="image.png" style="height:75%; width:75%" >
Using the style attribute doesn't have an effect (anymore?)
Following code give good result: ![]() <img src="/uploads/d19fcc3d3b4d313c8cd7960a343463b6/table.png" width="120"> It shows a clickable thumbail with a fixed width (and keep ratio image).
|
183

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}
Improve this answer

Comments

13

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).

Improve this answer

1 Comment

![]() is just an image markdown image embed so <img src="/uploads/d19fcc3d3b4d313c8cd7960a343463b6/table.png" width="120"> alone suffices.
0

If you want all your images to automatically resize to 150 x 150 pixels in the README.md(Markdown example) with no additional HTML or CSS in GitHub, the following steps worked for me:

  1. Upload image(s) to your repo.
  2. Go to to where your image is saved in your repo using your browser. Notice the image size is just a preview and not the actual size.
  3. Right click and select copy image.
  4. Edit and paste in the README.md(use browser to edit).
  5. The editor briefly shows !!Uploading image.. in the editor then it changes to ![image](https://github.com/user-attachments/assets/ffggfg-3202-0000-fdfd-somerandomnumbers
  6. Go to preview before you commit to check the image size and notice the is ~150 x 150 pixels in the README.md file.

Additional Notes I noticed no matter how large your image is, GitHub image preview in the browser is ~610 x 610 pixels but if you manually copy and paste the image into README.md file it automatically goes to 150 x 150 px. You can copy any image from any page on the web and paste it in the README.md,it does the same thing. Be sure to copy image and not image address. I used google Chrome browser for the above steps.

Improve this answer

Comments

0

This method with the curly brace "{" works great, but you should be carefull to integrate it before previewing the result. Once you preview the result with out the curly braces you cannot edit the dimensions. Even if you put it later it won't work and you'll have to reupload the image for this to work

Improve this answer

Comments

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.