nav[aria-label="Primary Navigation"] { padding: 0; & ul { list-style: none; width: 100%; display: flex; flex-direction: row; justify-content: start; align-items: start; gap: 30px; padding: 0; & li { margin: 0; } & ul li { list-style: none; } } }

Confluence: Responsive image height (not width)

remiles

I'm an editor on my company's Confluence account, so I don't have admin privileges. Is there a way, without obtaining admin privileges, to make it so that the height of images also changes responsively? For whatever reason, it's only the width that changes. The image editor only allows you to change the width and you can't change it to a percentage value. I've tried.

My code is set up as follows: The content is in a section and in two columns. The image is in a column with the width of 70%. I've had this same image problem even when the image is outside of a column. My page has a main content section and a right sidebar.

I have my images set to the "large" resize setting, not original.

I really want to edit the source code on my Confluence file, but I don't think I can without admin privileges. If that's the only way, I can see if I can ask to get them.

Ideal display:

Screen Shot 2017-06-21 at 10.44.34 AM.png Resized/shrunk display:

Screen Shot 2017-06-21 at 10.45.06 AM.png

Accepted answers

All comments

StephR

A couple of questions:

What version of Confluence is this?
What is the image type you are using?

One workaround for change the styling per page is to drop an HTML macro somewhere on the page, then you can drop in css similar to:

<style type="text/css">
.confluence-embedded-image {height: 100%;}
</style>

Note that this will target all embedded images on the page. You can drop html macros above and below your image element to add in custom divs if you would like to very specifically target one element in one page.

To impact all images in aspace or instance, you will need to reach out to your admins.

remiles

Thanks for your response, @StephR!

From what I can tell is that we have Confluence 1000.1711.1.

I'm using a .jpg file. When I search macros, I only find HTML comments.

StephR

Apologies, my answer was for Confluence server.

In Cloud, I was able to replicate the behavior you describe. I will check to see if a bug request has been filed for this. in the meantime, it does appear that original size images respond properly.

As a workaround, I recommend saving your image in the desired size, adding to the page, and setting to original. You should see the desired responsive effect after that.

Daniel Eads

Hey Rachel!

I realize this post is a couple years old but just wanted to circle back and let you know about some of the improvements we've been making to the editor in Confluence Cloud and how images are handled now. The new editor should be responsive in both directions in relation to the page. See how this works in practice on the improvements documentation.

If you're interested, we've also got a discussion going on Community about the new editor, all the improvements so far, and what's coming. Thanks for helping us make a better editor by pointing out what is and isn't working well for you!

Cheers,
Daniel

Natalie Toohey

This is great, but when will be seeing these new features in Server?

Kathleen

Yes, please!! The Server Image capabilities lag so far behind competitor capabilities. Simple things like this addition would make a huge difference in easing the dislike of, and fustration with, Confluence Documentation editing.

Nicolas Budzko_t9tnls

How can I resize one image (not all) on height only? I'm trying to create a dynamic background for a text/table, the width is fixed size but the height grows or shrinks according to the content.

Inside the table are others images that I don't want to be modified at all.

I'm using this CSS inside a CSS Macro to center a div element behind the content (text, table, other image):

.centerBG{

position: absolute;

top: 50%;

left: 50%;

transform: translate(-50%, -50%);

}

Regards,

Nico.

Welcome!

It looks like you're new here. Sign in or register to get started.

Quick Links

Find more posts tagged with

confluence

confluence-cloud

image

layout

width

responsive