Element "Image": Unable To Change Image Size - Question | JoomShaper
SP Page Builder 6 is Here! Learn More →
Back to the questions

Element "Image": Unable To Change Image Size

carloxp

carloxp

SP Page Builder 2 months ago

Hello JoomShaper team,

I’m using SP Page Builder 5.7, and I’ve encountered a problem with the Image addon that seems impossible to fix for us.

The issue is simple to describe: I insert an image with a real (native) height of 180px, and I want it to be shown exactly at 180px high.

But no matter what settings I apply in the addon, the image is always rendered around 280px high on the frontend. I tried everything: layout options, padding/margin settings, image alignment, even turning off responsiveness — but nothing worked. If I apply spacing to force a smaller box, the image just gets cropped, not resized.

As a last resort, I added this Custom CSS inside Page Builder:

.img-reset-size img {
  height: 180px !important;
  width: auto !important;
  object-fit: contain !important;
  border: 3px solid red !important;
}

And assigned this class to the image:

class="img-reset-size"

But even this doesn’t work: the image still appears larger than 180px in height. It seems the Image addon forces a resizing that cannot be overridden — either via UI settings or CSS.

Am I missing something, or is this a limitation of the addon?

You can see the issue directly on our staging website: https://staging.vivaioilpolliceverde.it The images appears in the boxes in the section: “Cosa facciamo: i nostri servizi”.

The real images height, from right to left, are 120px, 180px and 240px.

Thanks in advance for any help!

Carlo

0
13 Answers
Order by
Oldest Newest Votes
Paul Frankowski
Paul Frankowski
Accepted Answer
Senior Staff 2 months ago #199756

Ciao, If I may join....

Your image inside "Consigli su misura" already has 180px of height, is not higher, and is not displayed as higher !

BTW

You can use max-height instead of height, that works to set max height of image.

.img-reset-size img {max-height: 180px !important;}

please check from different browser if you are not sure, and use liner, as I did.

0
carloxp
carloxp
Accepted Answer
2 months ago #199765

Hi Paul, thanks for joining the conversation!

Yes, the image has a declared height of 180px. But in the browser (both Chrome and Firefox), it visually appears around 290px tall. This is not about the actual value written in the code, but how the image is rendered and scaled on the screen.

We even measured it precisely using an on-screen ruler tool, and the image clearly exceeds the declared 180px height.

Try inspecting the image in the browser using developer tools and you’ll see it’s not being displayed at its native size. And no — using max-height doesn’t help in this case, because something else (probably SPPB or the surrounding layout) is overriding or inflating the rendering.

We are testing this across multiple images and layouts. It’s a structural issue, not a single-case mistake. I appreciate your help, but please try to take a closer look — this is not about a missing CSS rule.

Thank you! Carlo

0
Ziaul Kabir
Ziaul Kabir
Accepted Answer
Support Agent 2 months ago #199634

Hello,

Thanks for reaching out to us.

Please, check now.

I applied a small css in your custom code css section based on your added new class.

Thanks

0
carloxp
carloxp
Accepted Answer
2 months ago #199644

Thank you for your quick reply! 🙏

I think maybe I didn't explain the issue clearly enough.

My goal is not to force images to a fixed height like 180px. The "180px" was simply an example to show how a 180px image is resized to about 280px.

What I need is simply to display images (ALL images) at their natural, real, size, without being automatically resized by SP Page Builder.

For example:

  • I upload an image that's 180px tall

  • But on the frontend it's shown at 280px or more, regardless of my CSS settings.

I tried every possible setting in the addon (Image Fit, Scale, Custom CSS) but nothing worked. I even used height: 180px !important; on the <img> tag — and the image is still scaled differently. This occours on all images (120px, 240px, etc.).

This behavior happens with all images added using the Image addon.

I'd like to be able to insert an image and have it displayed exactly as it is. Is there a way to do that?

Thank you again! 🙏

0
Ziaul Kabir
Ziaul Kabir
Accepted Answer
Support Agent 2 months ago #199647

So, just to confirm — you want the image to display at its original (native) size, exactly as it is, without any scaling or resizing. Is that correct?

0
carloxp
carloxp
Accepted Answer
2 months ago #199648

Yes, Ziaul, exactly so. ALL the images. It' is correct

0
carloxp
carloxp
Accepted Answer
2 months ago #199681

Dear Ziaul, I’m sorry to insist, but I believe there’s still a misunderstanding between us.

Yes, we confirm the three images have different native heights (120px, 180px, 240px and more). That is exactly what we want — they are meant to be small decorative illustrations in three sizes. But the issue occurs in other images too

🎯 What we are asking is: please let them appear at their native sizes, without being resized or scaled by SP Page Builder.

Right now, no matter what we do, each image is resized arbitrarily. For example, an image that is 180px tall shows up around 280px on screen. This happens even when we apply a CSS class with a fixed height (like “height: 180px !important”).

We tried everything:

  • setting the height in CSS
  • using object-fit, max-height, etc.
  • applying custom CSS classes
  • checking all image addon settings (padding, margin, width, height)

➡️ Still, the image does not respect the height we set, and instead appears much taller.

Can you help us understand how to prevent this unwanted resizing, so that the image is rendered exactly as intended?

Thanks so much 🙏

0
Ziaul Kabir
Ziaul Kabir
Accepted Answer
Support Agent 2 months ago #199761

Could you please provide a screen recording? I didn’t notice your images being scaled or resized by SP Page Builder.

A recording would really help me understand what you’re seeing and troubleshoot the issue more effectively.

Thanks!

0
carloxp
carloxp
Accepted Answer
2 months ago #199766

Hi, thank you for your message and for your willingness to help.

At this stage, I believe everything has already been clearly described — including technical details, screenshots, and actual measurements using an on-screen ruler. The issue is reproducible, and not limited to a single image or browser. A screen recording will not help further.

I think Paul has already picked up the key points and I’d prefer to continue the discussion from there, to avoid confusion. Thanks again for your time and support.

0
carloxp
carloxp
Accepted Answer
2 months ago #199769

Hi everyone, just to wrap things up and clarify the root of the issue:

All images inserted via SP Page Builder are automatically resized based on the available space within the column where they are placed. This applies regardless of the image’s native size or any custom class applied to it.

The logic behind this behavior seems to be:

“Images should adapt to the width of their container (column), in order to preserve the layout and prevent horizontal scrolling or visual breaking.”

While this approach may work for general responsive design, it removes any real control over image dimensions — especially when you need to display an image at its native size, or at a specific target size for design consistency.

We created a test page to confirm this behavior. Images with real dimensions of 180px, 240px, etc., are all rendered visibly larger (e.g. 290px, 390px), depending on the column’s width, even when no resizing is requested.

So, to be clear:

  • ➡️ There’s no bug
  • ➡️ But this is a hard-coded behavior of SP Page Builder
  • ➡️ And it makes precise image control impossible without overriding the layout logic

We consider this approach too restrictive and not ideal for professional usage. At this point, we’ll leave it as-is and move on with our work.

Thank you all for your time!!!

0
Ziaul Kabir
Ziaul Kabir
Accepted Answer
Support Agent 2 months ago #199776

Please, check this screen recording: https://drive.google.com/file/d/1d6mf9Exg_ggKy6RU3gcrTuofXheMKhgk/view?usp=sharing

In the front-end editor or preview, the image is displayed at its native size — it’s not being scaled or resized automatically.

You’ve added custom CSS that sets a fixed height. If you want the image to display using its native size, there’s no need to apply extra CSS — just make sure the image itself doesn’t contain extra spacing.

However, if you still want to maintain a certain height, it’s better to follow @Paul’s suggestion: use max-height instead of height to keep the layout more responsive.

Thanks!

0
carloxp
carloxp
Accepted Answer
2 months ago #199894

Hi @Ziaul and @Paul, we’ve just watched the video and reread all your helpful replies.

Now we finally understand the logic behind how Bootstrap handles image sizing in this kind of layout. We were simply looking at things from a different perspective, but your clear explanations helped us see it more accurately.

With this thread — and thanks to your patience and expertise — we’ve learned a lot about how SP Page Builder works under the hood.

Thank you both, truly, for your time and kindness. You’ve been incredibly helpful and generous. We can consider the thread closed with deep appreciation.

—Carlo & Tom

0