Row of images and max height

[AshleyF]

If I create a row, split into four columns and add a different image into each column I get a 4 different image heights.

I read on another thread that the new column element in the new layout system has a Max Height option so you can control the height of the column if you need to. But I can’t find that setting either?

[AshleyF]

@ocduk

I read on another thread that the new column element in the new layout system has a Max Height option so you can control the height of the column if you need to. But I can’t find that setting either?

I just found that setting, but it doesn’t seem to help. If I set max height to 200px, but my image is 400px, the image simply overlaps below the row.

[friech]

Hi @ocduk,

Thank you for writing in, if the images are not the same aspect ratio/dimension in the first place then what you’re trying to do is not going to work because images resize proportionally. Unless it’s fine for your images to be stretch.

Add this to each of your Image element’s Element CSS area to see what I mean.

$el.x-image,
$el.x-image img {
	height: 100%;
}

The other way to do this is to add your images as the Columns background, then inside those columns add a uniform size Gap Element.

Hope it helps,
Cheers!