Streaming live at 10am (PST)

How can i make text determine height of image?

I want my text and images to always be in line with each other. But i don’t know how i can achive this.

As seen i in the image below, the image extends very far beyond the text and i want to to be cut off at the blue line. It is also a cms item so i can’t just make the heigh of the image smaller because the amount of text might vary. :slight_smile:

Here is my site Read-Only: Webflow - Den Åbne Scene Fyn

Hello again @Staugaard one solution would be to set a height on the div that contains the photo. May be set a height of 55% and set the image’s object-fit to cover or contain.

Hi again, thank you so much for taking time to help me out.

This solution is not optimal. As all images that are used in the cms won’t be the same height, so it might cut off another picture too early. hope that makes sense


@Staugaard - I think either of the following would work:

  1. Put the text in one div and the image in a div next to it set as a background image, the height of the parent of the two divs should only extend to the height of the content and the background image will just fill the space it has available
  2. You could determine the height of the text using javascript and set the image height dynamically each time
1 Like

@Staugaard here is a code example of what @sam-g with was talking about in option #2: JS Bin - Collaborative JavaScript Debugging

My solution will require flexbox though. All you’d need to do would be replicate the structure including the class names (only difference being your text and image) and add the js code between script tags in the page settings under custom code before

1 Like

Thank you guys, i am not very good with code but i will give it a shot tomorrow.

Just to be clear this is the code that i need to copy right?
image

Also, “containerElement” would be the grid in my case which holds the textElement and imageElement?

Yes that js is what you need to copy and let me just go on ahead and do a video tutorial for you.

that would be very helpful, thanks

Update: I thought about it and it would not be fair for you to have to do anything too convoluted just to achieve this. This video will show you @sam-g 's first suggestion:

https://www.awesomescreenshot.com/video/4087114?key=f5f860da21322f6ed95b96ac9f82b83d

Here is the result live : [Equal Text and Image Height (webflow.io)](https://equal-text-image.webflow.io/

@Staugaard

Nice! Thanks that work perfectly