CODEWITHSUNDEEP
gitlabimage-resizing
Ben Kelly
Ben Kelly

Reputation: 1951

Changing image size in Markdown on Gitlab

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?

Upvotes: 195

Views: 154502

Answers (5)

Nicholas Moschos
Nicholas Moschos

Reputation: 1

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

Upvotes: 0

crissyg
crissyg

Reputation: 123

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.

Upvotes: 0

VonC
VonC

Reputation: 1328342

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}

Upvotes: 159

quent
quent

Reputation: 2185

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

Upvotes: 14

Basel Issmail
Basel Issmail

Reputation: 4015

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

Upvotes: 234

Related Questions