Match parent/children dimensions to that of specific child

Design help General
1

Hi guys,
I’m a bit stuck with layout in a div block :cry: :cry: :cry:

How can I automatically match the width parameter of children in my div block, to that of a specific child in the same div block?

IMPORTANTLY, the width of the child I want to match with is variable (I’m using different images of different sizes from a CMS, and I want to keep their original dimensions).

Below is a diagram which hopefully explains what I’m after (I’m at A but want to be at B, where child 2 is the image, and its width variable. Child 1 and 3 are text):

Capture0
Capture0210×738 2.4 KB

Any ideas?

Note: The div block is a flexbox.

From googling it seems if the div block is turned into an in-line block it’s possible? I’ve tried this though, and it doesn’t work. Also, it seems webflow doesn’t let me set the div block as an inline block when it is itself a child of another flexbox…

Anyway, if it’s not possible to fix this problem, could it please be added as a new feature in Webflow…?

Many thanks in advance!!!

Here is my site Read-Only: LINK
(how to share your site Read-Only link)

2

Hello.
Photos have a fixed ratio of width and length. If you change only one of the two, you get distortions. A solution is to omit the max.heigh, then all photos are the same width but different in height.
If you want all photos to be right, they must all have a fixed height and width ratio. Something like 4/3.

3

Thanks for your reply!

Here’s a screengrab of my problem which better explains:

Capture10
Capture101705×853 213 KB

I want to keep the original proportions of the images and squeeze the header and text to match the width of the images…

4

webflow
webflow790×693 161 KB

Is this what you want?

5

Give ‘div Block 6’ a width of eg 80 vw. Remove the ‘Max H’ from the image!

6

Oh yes that’s a solution, I hadn’t thought of that! :slight_smile: :slight_smile:

However the specific problem is to get the dimensions of the images to stay the same as they are in the example.

Basically, ‘Div Block 2’ would not be the same width - it would be variable - the header & the text would automatically be squeezed or stretched to the same width value as the width of the images.

I’m not sure if that’s possible.

Thanks so much for helping! :slight_smile:

7

Hi there @lhark

If you use a width on the image 2 class they all get the same width. I did a video to demonstrate.

Another option is to use a background image, made another video to demonstrate.

We released this feature as well where you can have background features with inline images.

Let me know if this was helpful.

Kind regards,

Jörn :sweden:

1 Like
8

Oh cool! Thanks so much!

These suggestions are all very helpful and I will definitely give them a try :).

However the specific desired output is this:

IMG_20200210_220942
IMG_20200210_2209422736×3009 702 KB

Sorry guys, I feel I’ve failed to explain well what I was intending - I should’ve uploaded this picture first time around! (I’m pretty new to this web design game.)

Best regards

Louis