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:
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:
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:
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!
Answer
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.
Here is a source for doing this in CSS:
https://css-tricks.com/seamless-responsive-photo-grid/
No comments:
Post a Comment