I need to set area on site with most downloaded books and I'm facing the following problem:

  • Book covers can have different width and height ratio, meaning not all books have proportional edges.
  • There is grid system in place, and I'm limited to display 3 books per row

At first I have hard cropped thumbnails to same dimensions (for example 400x300), but thats also not good idea since book covers can have important data on them like actors face, title etc etc..

Narrowing down, I have created 3 different scenarios but I'm not sure which one is the most usable to end user.

Question: In your opinion which one should work the best and do you perhaps have another solution?


  • 2
    Have you looked at how other, sites, handle, this? Seems like most favor same height as opposed to same width thumbnails. – maxathousand May 25 '17 at 20:53
  • @maxathousand yes, but due the grid factor (all columns have same width) I'm limited to width factor. – RhymeGuy May 25 '17 at 21:09
  • 5
    Well, just because all columns have the same width factor doesn't mean the images themselves have to have the same width. :) Although I suppose finding that sweet spot for a height that suits all images will be difficult too. – Monomeeth May 25 '17 at 21:27
  • 1
    put them in a virtual book shelf! – colmcq May 26 '17 at 9:55
  • (@Monomeeth) taking into account unusual formats either fixed width or fixed height may lead to trouble. Books I know of, checked via amazon, have height/width ranging from 0.67 to 2.1. Amazon seems to fix the width wide enough for the vast majority of covers but allows the height to grow really quite tall where they put they image of a single book on an item page; it would be less good in a grid. – Chris H May 26 '17 at 15:04

By the usability point of view, the optimal choice would probably be #2, since it leaves no doubt about the binding between the book title and its cover (see the Gestalt's Proximity Principle).

An example from www.barnesandnoble.com : demo screenshot

However, you should pick a vertical ratio limit in order to avoid too high rows: if a cover is too tall, you should fix its height to a certain value and leave some empty space on its sides.

enter image description here

  • 14
    Also, this reminds me of a shelve in a store. All items are lying on the same line with the price/description on the bottom. – the_lotus May 26 '17 at 12:15

You could use centering, with the letterbox or pillarbox drawn in a color taken from the image, so it naturally fills it out.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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