Skip to content

Images aren't properly displayed in orgmode READMEs

Summary

Images don't adjust in resolution and size in an org-mode README and often get's shifted randomly.

Steps to reproduce

Bring in any image through a link in a README.org file.

Example Project

https://gitlab.com/avron/armacs

What is the current bug behavior?

Currently, screenshots are displayed in large sizes. Or are shifted in some direction.

What is the expected correct behavior?

Large images, say a screenshot of the entire screen must be reduced in size to fit the page of the README without having to zoom out or scroll sideways to view the screenshot.

Relevant logs and/or screenshots

Two examples from two of my repos with same code running on Gitlab vs Github.

Imgur Imgur

This is how I put the images in the file

[[Imgur][https://i.imgur.com/vunwoQ7.png]]

Output of checks

This bug happens on GitLab.com

Possible fixes (from https://gitlab.com/gitlab-org/gitlab-ce/issues/65798)

Update the CSS or JavaScript.

The following CSS could fix it:

.file-content p img {
    width: 100%;                    /* will be used by browsers which ignore both the -moz and -webkit-prefixed declarations or do not support -moz-available or -webkit-fill-available. */
    width: -moz-available;          /* WebKit-based browsers will ignore this. */
    width: -webkit-fill-available;  /* Mozilla-based browsers will ignore this. */
    width: fill-available;
}
Edited by Abraham Raji