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

[Leo]

Hi there,

I’m trying to achieve the images in a grid to have the same height. After reading your documentation, I played around with the GB container flex options, but I still can’t figure out how it works.

You can see the issues here and here.

[David]

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.

[Leo]

Hi David, thank you for answering so fast and for your explanation. I’m trying to rank for a specific keyword, and I want to make sure that Google finds the alt text and caption of the images. That’s why I wonder if it is better to display pics using image blocks than to have them as the container’s backgrounds.

Does it make any difference from an SEO point of view?

[David]

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.

[Leo]

Thank you, David. Images now display the same size, but they look bad since they must fit the forced size. Besides, I wish I could choose between different proportions for the containers (for example, 66% and 33%), not just 50% and 50%. I understand one must decide between the flexibility allowed by using backgrounds to the containers (with the drawback of missing alt texts and image captions) or using the much more rigid WP gallery block and keeping alt texts and captions. I’d like to have both. 🙂

[David]

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.

[Leo]

Fantastic, David, that was just what I wanted! I’m very grateful for your kind assistance. 🙂 Just two more details:

1. The left image of this grid should be slightly downwards. Is there any way to adjust its position?
2. The caption of the same pic is left-aligned. If possible, I’d like all captions to be center-aligned.

[David]

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

2. I amended the CSS above to centre the caption

[Leo]

Captions are perfect now, thank you!

Regarding the image, rather than centering the container, I’d wish to adjust just the position of the pic. As you can see, the image on the left shows cropped since the head of the person in the foreground is not visible. How can I adjust the position of the image without moving its container?

[Fernando]

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!

[Leo]

Great, Fernando. Thank you so much!

[Fernando]

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

[Author]

Posts