[Resolved] How have 2 images with the same height on a grid column

[Marcel]

Hello,
I uploaded two images in a grid with 2 columns (50% – 50%):
– Image 1 is 306×447 px, and
– image 2 is 378×447 px, so they are the same height.
How can I set them up so they have exactly the same height in the container, even if the width is different?

Thank you!
Marcel

[David]

Hi there,

Options ( not the best in my opinion ):

1. Set the Image as a Background Image to the Grid column. Add some top and bottom padding or min-height to set the container. Some of the image will get cropped….

2. mess around with the column widths, the wider image will need a wider column for it to fill the space. Will be bad responsively.

OR

The best fix is to crop your images so they have the same aspect ratio 🙂

[Marcel]

Hello, David!
I choose to crop my images so they have the same aspect ratio. This is the best option, indeed!
Thank you for your advice.
Marcel

[David]

You’re welcome

[Author]

Posts