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”.
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.
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!
Printscreens from iOS compared to preview i Webflow:
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.