Make an image size "cover"

Support
#1

Hi I’m trying to get a regular image to “cover” the space it has.
However I can’t seem to get it to work. I’ve tried “object-fit” but I’m not sure what I’m doing wrong. The attached image shows what I’m trying to achieve:

As you can see, both columns are not equal height so It seems a bit weird. I want the image to be always the same height as the text.

#2

HI There @cxam,

Thanks for writing in! Could you please try setting up an equal height columns and see if that helps. You can achieve this by setting a class to the container of the columns and set the display to flex so that the columns will have the same height.

Here is an article that shows you how to do that (https://michaelbourne.ca/create-columns-equal-heights/).

For further information, you can also review this thread (https://theme.co/apex/forum/t/equal-columns-team/48163/6).

Hope that helps!

#3

Hi, Unfortunately that is creating the same white space

#4

Hi @cxam,

You can use an image as the background of the column so that the image would fit the column height.
If you use image element the gap would come in different screen size.
It’s hard to match the height as the image may get squeezed.

Thanks

#5

That solved the issue. Thanks

#6

You are most welcome. :slight_smile:

#7

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