Display full-size image on any screen width in Confluence page

[Benedikt Putz]

Hey everyone,

since Confluence 5.1 Confluence resizes every image so it best fits the screen size currently available. This is usually great, but doesn't help so much if I want to display an image and have comments next to it that relate to that specific line in the image (the image contains different process steps and I want the comments in the wiki page so I can link to other Wiki pages).

So is there a way to make sure Confluence displays the image in full size on any screen size? Maybe using a horizontal scroll bar for the image so it fits inside the left column (left column: image, right column: comments). If I remember correctly this used to be the default behavior before Confluence 5.1.

[Kirstin Seidel-Gebert · Accepted solution]

Hi Benedikt,

do you have the Confluence Source Editor Add-on installed? If yes, you could use it to add a CSS class to the paragraph containing the image and then add the following CSS to the custom stylesheet of the space:

.wiki-content .maxImg img.confluence-embedded-image { max-width: none; }

I tried it in a space with Documentation theme (Confluence 5.5.2) and it worked.

Grüsse,
Kirstin

[Benedikt Putz]

It's working, awesome :) Scroll bar doesn't seem to be working though, I tried overflow:scroll and it just puts grayed out scroll bars there that I can't use. Any advice?

[Kirstin Seidel-Gebert]

I played around a bit and finally got the idea to put the image in a table. In this case, you even don't need max-width: none; anymore. Confluence displays the image in full size and a horizontal scroll bar to scroll the table.

Is this what you need?

[Benedikt Putz]

Thanks a ton, exactly what I was looking for :) And it's a pretty simple solution, too.

[Kirstin Seidel-Gebert]

;)
Gern geschehen.

[Kirstin Seidel-Gebert]

I played around a bit and finally got the idea to put the image in a table. In this case, you even don't need max-width: none; anymore. Confluence displays the image in full size and a horizontal scroll bar to scroll the table.

Is this what you need?