Shrinking two images keeping the same height

I have 2 images with same height but different widths. How can I scale down the images as window shrinks?

One option is use % for each image. You have to paly with the % to find the ones that work. But as the window shrink, the column gap between the images get wider relatively; it should shrink proportionally or be kept constant. Is this the best we can do in Bubble? Maybe there is a CSS option?

A hack option is to combine the 2 images into one. It works very well, but this option can’t be used when the images are dynamic.

What is the goal, to keep the two images the same height while reducing their width as the browser width decreases, but at the same time keep the original proportions? I don’t think that is possible mathematically.

If you have image #1 with height of width of 150px and height of 200px so 3:4 proportion and you have image #2 with a width of 100px and height of 200px, so a 1:2 proportion it would not be possible to keep the original proportions of the image while simultaneously keeping the heights of both images the same without some distortion of the images.

Is there a real need to keep the images different proportions or could you just make both images the same width and height and just use the imgix operators to crop automatically?

Hey @net-tt, a few questions…

  • Will there only ever be exactly 2 images?
  • Is the aspect ratio constant for the image in each position?
  • Should the images never stack - even on mobile?

This is the design that is given. I need a way to make it responsive. Right now, with the % option, the images can shrink proportionally, except for a bit of problem about the column gap when the window size is pretty narrow. But when it is mobile, one image disappears, so the column gap issue is not releveant. So the % option is indeed an acceptable solution at thsi time, in addition to the combined image. I just would like to know if there is another better option.

@sudsy When it is mobile, one image will disappear. The design is only for 2 images. So it is just exactly 2 images. I just wonder myself if there is an universal way to do it for multiple images.

To make it shrink nicely, the images should be shinrk proportinally, but the content of the image don’t need to be shown the same, i.e. they can be scaled. Think abou this. A user opening this page with width at 1100 px, 1000px, 900pex, etc. should see the page with the 2 images side by side like the design. The actual images don’t need to look the full images, but would be nice if they do.

Hey @net-tt,

If the left image will always be more or less square-ish and the right one basically landscape, then my best suggestion would be to go for a consistent aesthetic by explicitly setting a specific aspect ratio for each image. Then tell Bubble to effectively “fill” the image element (by choosing Zoom for the Run-mode rendering property), which will mean that each image gets cropped if it’s not exactly the configured aspect ratio.

Although you might lose some of each image around the edges, it will result in the “cleanest” most consistent appearance across devices. In the following example, I used an aspect ratio of 1:1 (square) for the image on the left and 2:1 for the image on the right. And of course, you can also hide one of the images on narrow devices…


If you’d like access to the editor for this setup, feel free to message me directly.