Hey Kai,
On the previous screenshot, I made mistakes on it. I set an image as an element with a background image that’s why the image has the same height. The only option to have the same height using the Grid is setting the image as background or you can follow the suggestion by my colleague by using the flexbox.
Hope that helps and am sorry for the inconvenience.
dear @marc_a,
thanks for clarifying!
so you used an image element with the same image in the background? so two times on top of each other?
i have to ask again for the reason why there is no solution for such an often used case. is there no way grid can tackle this problem?
what i ended up doing is, that i cut off parts of the images so that thay are the same height on desktop viewport and then changed the gap for each and every other viewport so that the images keep being aligned top and bottom. very unintuitive, though…
best wishes, kai
Using the advanced background on a cell has been the solution in most grid examples and has been brought up.
If that’s not sufficient for SEO purposes. Inside a cell of a grid, create a div that is absolutely position. Set the width and height to 100%. Inside that div add the image. Set the image height to 100% and width to auto (might need to be reversed depending on the image). Use “Cover” for object fit. It worked pretty good for me. Let us know if that helps, have a great day.
This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.