Text determine height of image collection item

How do I get the text height of a collection item to determine the height of the image.

This is what I’m trying to achieve: https://www.mckinsey.com/
(Three stories below the top section.)

Image width is always 50% of the screen, but the image height adjusts to the text height.

Set the height of the collection item div to auto, it will expand with the text height automatically, since texts do have intrinsic height, while the image must be with height: 100% and possibly with a object-fit cover

But then, won’t the height of the collection item adjust to text or image, depending of which of the two is the highest?

I want the text height to be the dominant always.

So when the screen gets wider, I want the image width to be 50% of the screen, but the height to be dominated by the height of the text.

no if you set the image to height: 100% inside a div that is auto, the image would not have any intrinsic height

I don’t get to work.
I must add that this is a collection list with image and text changing side for every new post.
That gives me some restrictions on what to do, I think. :roll_eyes:

Have a look if you’d like:


Hi, I think what @Jan_Fredrik_Bjorntve is trying to do is to use an image block and not as a background image of a div. In this case the image you add has a set height which makes the parent element grow to the image height.

I have the same problem and for me I dont want the image to get cropped in any way as it is a logo.

So I want to use the image element, but I want that image element to only fill the remaining height which should be determined by the text!

Is there a way to do this?

Read Only: Webflow - TVGx