So I have a sponsor logo area on the site i’m working on and i’m wondering what the best way to do this is. It’s the age old problem of some of them being big and square and some being wide and short. I know Kirby can give me the widths and heights of images, but how would go about checking the width and height and making sure they are all the same height with the logo width being auto width?
I think I need to check for the longest edge and then add either a “tall-logo”, “wide-logo” or “square-logo” to it accordingly. Then i can do the scaling in CSS.
Thanks for the suggestions. I have already tried the background-size and object-fit options, but it happens on all logos, and there is still a big difference in scale between them. i think if i can add those three classes to them, i can even them out in finer detail.
I know i could put custom fields in the file meta to add the class, but I prefer to automate as much as possible to avoid over complicating the UI.