I nee help, your opinions and which options do I have to resolve my problem. Currently I'm working on a website that have a Thumb view and I'm not happy on how the items are displayed, I have something like this:

Current thumbview

So, the real problem that I am facing, is that the images loaded inside each of the thumbs may vary their sizes, there are some images higher other wider, so I decided to center each of them inside the thumb, in this way:

  • The images whose height were major than the width I centered in the X axis
  • The images whose height were minor that the width I centered in the Y axis

I made it in this way to show to the user the image correctly and not zoomed or cutted, but now the thumbs are really ugly, the view can for example look like this:

thumbs with images

The size of the images are a thing that I can't handle as I get them dinamically from some services. To be more precise, it's a capture of the list in the site:

enter image description here

The upper and down space between the images is because the size of the thumb div, so it lets that space that I really don't like, when the user hovers over the thumbs 2 buttons are displayed, so I need that the thumb be at least the enough higher to display them (this maybe could be more problematic with the images that are to wide). So, what are the recommendations to improve the UI/UX of this list? Thank you very much in advanced!

1 Answer 1


You can either get rid of the outer thumb div or size it to the same size as the actual image and put a little padding around it then use a flowing grid pattern, sometimes call a masonry layout.

Masonry Layout

Here is a source for doing this in CSS:


  • Hey!! I like it, I will check it! Commented Feb 2, 2017 at 17:23

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.