Image in responsive engine is stretching with keep aspect ratio

Need help Responsiveness
1

Hi ,

I am new to bubble and after playing around I found,

In new responsive engine Image always changes it’s ratio Even if KEEP ELEMENT ASPECT RATIO FIXED

image
image924×588 114 KB

AM I missing something?

Note in HTML code in IMG tag it is defined CSS as Width=100% and Height=100% which I think should produced as Width=100% and Height=auto and when I change it to auto in Chrome debugger it works absolutely fine.

Any help is appreciated.

Thank you

2

As a temporary solution you can do this:

  1. Instead of the image add a group to the page, remove the Style, set the Background to image and either use static or dynamic image to set the desired image:

image

  1. Set the ID attribute for the group (f.i. imageYoda):

image

Note: Activate ID attribute in Settings - General:

image

  1. Add an HTML-element to the page:

image
image617×555 12.5 KB

  1. Add the following code to the HTML-element:

image
image956×418 9.63 KB

Note: Sorry for the screenshot of the code, the post-editor interprets html-tags it seems. :slight_smile:

  1. This allows you to resize the image with the right aspect ratio:

XzH38mW1yf

Note: Of course you can play around with the style settings, f.i. use what you suggested, width 100% and height auto.

4 Likes
CSS paragraph styling
3

worked like a charm. Used jquery height(‘auto’) .
Your info was precious to me.
Thank you.

1 Like
4

Are we then saying that this is a bug?

2 Likes
5

I think so as well.

6

Is there an official word on this? Doesn’t Bubble support the good old crop/stretch/scale options now at all for images?