▼
Streaming live at 10am (PST)

Dynamic image filling 100% of column height and cropping sides

Design help General
#1

Hi again!

I have a two part problem. The first one seems to be a reoccurring problem for me… getting the content inside one column to fill 100% of the height the other columns (or the parent Row)

So far:
I have made a Dynamic List with key persons. Inside each Dynamic Item I have a Row with two Columns. In the left column I have an image of the person linked in from a Collection. In the right Column I have contact information linked from the same Collection.

The problem:
The image in the left column fills 100% of the width, leaving blank space bellow the image compared to the right column that holds contact information.

Question:
How can I get the image in the left column to always use 100% of the height used in the right side column, at the same time keeping the aspectratio of the image? by cropping the sides of the image automatically?

I can of cause upload an image with the aspectratio of the left side column, but that does not make the content very “dynamic”.

Webflow-Problem-02.jpg1015×378 43 KB

#2

Hey @Christoffer,

Can you share your public link so I can have a better look?

Now going from the information you already shared, I would use a div element instead of an image and give that div a background image set it to cover and position center.

Next you need to use flexbox to align your columns to the height of your biggest column in that row, than make sure to also let the div fill the height of your column.

Let me know if you need any help with that!

#3

Hi @SidneyOttelohe

Can I link the background image in a div in from a collection? (that’s essential in this case)

Unfortunately I’m under an NDA agreement on the site, so I cant publish a link, but perhaps I can PM it to you?

Christoffer

#4

@Christoffer

Yeah that’s totally possible.

Ah I see! Sure man, just send me a PM and I’ll be glad to help you out.

#5

PM sendt!

A div with background image and flexbox on the parent row seems to work! The problem now is that the columns do not stack on top of each other in mobile view.

Edit: On iPhone Safari and Chrome it does not work at all unfortunately! :frowning:

Printscreens from iOS compared to preview i Webflow:

Webflow-Problem-04.jpg1200×701 74.4 KB

#6

The ‘background image from collection’ approach seems to not work on any Apple device, both iOS and OSX. Have tested in Safari and Chrome. Strange!

#7

Hi @Christoffer, without seeing the read-only link it is hard to say but, I would check though, that the div that has the background image applied, has a width and height set to 100%.

On the columns not stacking, select the row and check the column settings for mobile view, to make sure those are set to display as collapsed.

#8

This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.