Confining an image size in different instances so they are all the same. How?

Design help General
1

Hello,
I am trying to confine the size of some images in the bottom row to make them all the same size. (Here is the read-only link) I’d like them to be the same as the one on the left.

I thought it would be the same as changing the button text in the instance, but was wrong.
How do I fix this?

Tried to find the video here but was unsuccessful and watched YouTube videos, but all I saw were for grids.
Should I be using a grid instead of instances?

On the plus side I did manage to get them all in a row.
Slow, very slow progress, but progress none the less. Maybe…

Thanks for taking the time to read this.

Here is my site Read-Only again: [Webflow - testa]

2

“Same size” means either pre-preparing your images, or scaling and cropping them.

Here I’ve changed 3 things on your image class [1]
Assigned a width & height [2]
And set it to fit: cover

This will ensure the image completely fills the space you’ve allocated, but edges will be trimmed if there more image than the space allows.

image
image1920×954 97.8 KB

3

Hello memetican,

Thanks for taking the time to help me with my problem.
I followed your directions and and things have improved greatly.

All three images have the same W (216px) but varying H (155px, 216px and 321px. respectively).
Why is the first image’s W trimmed off, but the other two aren’t?

Again, thanks for your help.
Stay safe and enjoy!

Here is my site Read-Only: [Webflow - testa]

4

After reading a post about using grids I tried using a div set to grid with divs inside to get the look I wanted. It kind of worked, but the images are still not the same size.
All the images in the very bottom row have the same H (155px) but varying W (216px, 155px, and 104px respectively)
Why are the images still displaying wrong?
Sorry for my ignorance.

5

Have a look at my screenshot again, I’m not seeing the settings on your image. You don’t have fit cover, or a height set.

6

Hello,
I apologize for my mistake. I thought they were set properly previously.
The setting now match those in your screenshot. The second to bottom row now looks the same as yours.

1 copy
1 copy1920×1080 108 KB

As expected, the first image remains trimmed.
In the bottom row the first image displays as desired, but other two don’t.

How do I get the first image in the second to bottom row to display as the first image in the bottom row?

2 copy
2 copy1920×1080 110 KB

Thank you for your patience in helping me through my ignorance.
It truly is appreciated.

Here is my site Read-Only again: [Webflow - testa ]

7

Some notes for you-

8

Thank you so very, very much for the video!
It was an expertly done explanation on what I need to do. And it is what very close to what I want the final page to look like.

I’ve watched the various Webflow tutorials, but am struggling with converting that knowledge into something I can use in my own way.

I’ll try to follow all you’ve suggested and let you know the results.

Again, thank you very much for all of your instruction. And patience.

Stay safe an enjoy!

1 Like
9

Dear Michael,

Your video saved the day.
Everything is where it should be and the size it should be.
I’ve added padding to the images to keep it the same size as the text above, but am not sure that this is necessary.

Your help in showing me how to solve this problem is greatly appreciated. Thank you!

Stay safe and enjoy!

1 Like