how to adjust the size of the image according to width of screen.

Some users have really large or small resolutions. I want that the image changes sizes according to the available space to avoid scrolling.

Is this possible?

6 answers

1 accepted

5 votes
Answer accepted

Hi Jorge,

The Confluence attachment macro resize based on the px measure which is fixed and does not scale based on the resolution or the containing block

You can use this simple user macro that I've written. It will resize the image witdh in percent based on the containing block. This means it will resize based on the resolution of your user screen. Just put it in Confluence Admin >> User Macros.

Below is the configuration I used to create the user macro

Put the Code below into the User Macro Template:

## @param attachment:title=File name of the image attachment|type=string|desc=The name of the attachment |required=true|multiple=false
## @param pcent:title=Percentage|type=percentage|desc=The size of the image in percentage|required=true|multiple=false

<ac:image ac:width="$parampcent%"><ri:attachment ri:filename="$paramattachment" ></ac:image>

Type {image and suggestion for the macro will be shown in your macro browser.

Here's an example on how to use this macro:

Fill the first field with the attachment name and the second field with the percentage of the attachment you wish to display based on the containing block.

Hope this helps!


Jing Hwa

We found out that images were not adjusting to browser window size because they were justified in center (as text). Keeping justification to the left did the trick: they respond to window size. smile



Can you please share the code for left justification?


Thanks Cesar, this solves my problem.
for Vikram It's not a code. It's just an alignment on text


If you click on the image in Edit mode, you should see a number of options that allow you to re-size the image.

There is a set of three squares that make the image smaller or bigger when you click them.

At the beginning of the options there is a field showing how many pixels the graphic currently is. You can click in there and enter another figure.

Note that while you can edit that figure, the graphic will not always be able to re-size to the figure you enter. I've no idea why it does this, but that's my experience.


0 votes
Davin Studer Community Champion Jan 14, 2014

You could use CSS media queries, or you could use Javascript to iterate through the images on the page and adjust the size depending on the viewport width. It looks like Confluence keeps two versions of images you attach ... the original and a thumbnail. Looks like the only difference in the url to the image is the "attachments" vs "thumbnails" folder (ex. /download/attachments/... vs. /download/thumbnails/...). When you use the image sizing buttons in the editor the smallest two(small & medium) use the thumbnail version of the image and the other two(large & original) use the attachments version of the image. So, if you use Javascript you might want to consider swapping out the image if you resize it smaller ... not for bandwidth purposes as you have already downloaded the image but rather for display quality. Although even that might not be a big deal as all the newer browsers will do image interpolation when downsizing rather than just pixel resizing. But if your user base uses IE < 9 then you might still want to swap out the image with the thumbnail if you drasticly reduce the size as the image quality might look bad when you resize the original down.

Agree, you can use CSS to adjust image size. You can get the screen size from the DOM using screen.width and screen.height. Then you can write some JS to load or replace with the desired image or adjust the height/width attributes on the image (which would scale it, but doesn't always look great).

It would be helpful to be able to enter a percentage width instead of just a pixel width in the following toolbar:

image2016-8-22 18:3:29.png

I am getting various scrollbars inside my page due to images extending beyond the available screen area.

Suggest an answer

Log in or Sign up to answer
Community showcase
Published Mar 12, 2019 in Confluence

Confluence Admin Certification now $150 for Community Members

More and more people are building their careers with Atlassian, and we want you to be at the front of this wave! Important Dates Start the Certification Prep Course by 2 April 2019 Take your e...

1,051 views 2 13
Read article

Atlassian User Groups

Connect with like-minded Atlassian users at free events near you!

Find a group

Connect with like-minded Atlassian users at free events near you!

Find my local user group

Unfortunately there are no AUG chapters near you at the moment.

Start an AUG

You're one step closer to meeting fellow Atlassian users at your local meet up. Learn more about AUGs

Groups near you