[Resolved] An issue with the height of images in a grid

Hi there,

ok so images are displayed according to their aspect ratio. The browser measures the width of the image, which is being ‘controlled’ by the columns width, and then uses its the aspect ratio to calculate its height.

So if you have 2 images, with identical aspect ratios sharing equal % of the grid then they would have the same height.

When any of those variables change the images are going to be different heights.

Simple fix would be to add the images as a background to the Containers in the grid, and give the Containers the same min-height. It does mean some of the image will get cropped as they are forced to cover the container.

Images using the Image Block may have better SEO juice as they can contain a caption and alt names, but I am no means an expert here so its just my assumption. If it is essential then try this method:

1. Set both the columns to 50%. Each containing your Image Blocks.
2. Select the Grid Block and in Advanced > Additional CSS Class(es) add: force-aspect-ratio
3. Now add this CSS:

.force-aspect-ratio img {
    aspect-ratio: 4 / 3;
    object-size: cover;
}

Adjust the aspect-ratio to suit.

Ok lets try another method.
Remove any CSS and CSS classes you added.

1. Add this CSS:

.same-height-images .gb-container {
	position: relative;
}
.same-height-images img {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	z-index: 0;
}
.same-height-images figcaption {
	position: absolute;
	top: 100%;
        left: 0;
        right: 0;
}

2. Select the Grid Container and give it a class of: same-height-images

3. Select the Columns, set them to the % widths you want eg. 33 / 66 and give them both a Spacing > Min Height eg. 250px.

1. Hmmm…. you can try adding some top margin to the columns container.

2. I amended the CSS above to centre the caption

Hi Leo,

To resolve this, you may a custom class to all images which has this specific issue then use this class as a selector for a custom CSS code.

For instance, object-position-top: https://share.getcloudapp.com/xQuqWjd5

Then you may add this CSS:

figure.object-position-top > img {
    object-position: top;
}

Reference for object-position: https://css-tricks.com/almanac/properties/o/object-position/

Hope this helps!

You’re welcome Leo! Glad to be of assistance! Feel free to reach out anytime if assistance with anything else is needed. 🙂