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.
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:
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
You could determine the height of the text using javascript and set the image height dynamically each time
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
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:
