How do we design elements that feature unpredictably sized images?

Question

There are contexts where a design needs to represent several items, each with inconsistently sized images. One example might be a customer database, where the customer's logo is an identifying feature. These can be very difficult to design for.

Are there any common design 'tricks' for ameliorating the irregularities caused by variations in image size? Any visual elements that reduce the effects of the lack of alignment, or that decrease the impact of gaps caused by rigid grid systems?

For instance, I've seen some designs that handle this by randomly rotating and layering the images for a 'photoboard' effect, but that only works well in particular circumstances.

Answer 1

There are times when you just need to abandon the grid and just focus on the placement of the content so that the logos/images are clearly delineated and a person can quickly differentiate between them as shown in this image below:

Alternatively if the logo sizes have huge variations,you can use those variations to create a descending or ascending order or even random look as below

Lastly as Kimberley Dietemann pointed out if these are not valid options,the most feasible way is to re-size the logo to an acceptable grid size and place it on a background and place it in the grid

Answer 2

Stretching or shrinking images can result in unpleasant visual effects. However, it wouldn't be hard to analyze the size of the image, resize it if necessary, and then place it on a black or white background that's always the same size.

For example:

A transparent logo .png could be centered easily. Users could choose black or white based on their logo colors.

(Disclaimer: I'm more of a user research / usability person vs. visual design, so ymmv ;)