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/avronr/emacs.d/
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.
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
https://gitlab.com/gitlab-org/gitlab-ce/issues/65798)
Possible fixes (fromUpdate 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 Walmyr Lima e Silva Filho