Information

Setting the size of the attached image to "Original" will allow the image to scale(resize) automatically to fit the screen browsing Confluence (eg: Browser) in the case if the browser size is smaller than the image.

Same goes to placing an image with the size set to "Original" inside a table with Fixed Width, the image will scale(resize) according to the width of the table that is set by the editor.

Problem Definition

However, placing an image with the size set to "Original" inside a table with Responsive width will cause the responsiveness of the table to scale up its border to the actual Original image size, ignoring the browser size and showing a horizontal scroll bar in the table, which can break the experience of displaying a large sized image in a Responsive table.

The behavior described above can be seen in the videos below:

• Original Image Size.mp4
• Image Scale vs Table Scale.mp4
  • Image that is used in the test: atlassian logo2.png

Suggested Solution

Allowing both the Table and Image to be responsive to the browser size so everything can be shown in the screen without scrolling.

Workaround

To ensure the table fits the browser size, you can add this custom CSS at either the site level (which will affect all pages in the instance) or the space level (which will affect only pages in that particular space).

table.confluenceTable td.confluenceTd img, table.confluenceTable td.confluenceTd .confluence-embedded-file-wrapper img, table.confluenceTable th.confluenceTh .confluence-embedded-file-wrapper img {
      max-width: inherit;
} 

To edit a space's CSS style sheets:

1. Go to the space and choose Space tools > Look and Feel from the bottom of the sidebar.
2. Choose Stylesheet then Edit.
3. Paste the custom CSS into the text field.
4. Save the changes.

To edit the global CSS stylesheet:

1. Choose   > General Configuration > Stylesheet. 
2. Choose Edit.
3. Paste the custom CSS into the text field.
4. Choose Save.