Making different sized images the same size in the footer

Hi everyone,

I’m making a footer with various logos that need to be included with links to their corresponding websites, however the logos I have to hand are all different sizes and are looking pretty awful.

What I’ve tried is putting each image inside a grid block and adjusting each of them manually, but doing that means the alignment gets all messed up.

How should I go about fixing this? I’m at a total loss.

Here is my site Read-Only:

I would start with cutting the excess height off Audmars and Golf Saudi using photoshop or

Then I played with a fixed height of 80px, which seemed to work.

Because the ratio of each on is SO different, you might be better playing with an arrangement on 2 rows.

CAn you split the Cleveland Golf and Sirixon into 2, as they are separate websites??

Thanks for the help! I’ve asked the client if they can send me all the logos in the same size, but I might still try your idea of two separate rows.

Would it be best to try that by adding a second row to my grid, or is there a better container to use for that sort of thing?

Thanks again.

Same size = same height (for the look of the page)

Yeah, second grid row should work fine…but maybe a flex box with justify:space between would work well too

1 Like