web-dev-qa-db-ja.com

本を続けて表示するためのより良い方法

ダウンロードした書籍のほとんどをサイトに配置する必要があり、次の問題に直面しています。

  • 本の表紙は、幅と高さの比率が異なる場合があります。つまり、すべての本に比例したエッジがあるわけではありません。
  • グリッドシステムが配置されており、1行に3冊の本しか表示できません。

最初はサムネイルを同じサイズ(たとえば400x300)にハードクロッピングしましたが、本の表紙には俳優の顔やタイトルなどの重要なデータが含まれている可能性があるため、これも良い考えではありません。

絞り込んで、3つの異なるシナリオを作成しましたが、どのシナリオがエンドユーザーにとって最も使いやすいかわかりません。

質問:あなたの意見では、どれが最も効果的であり、おそらく別の解決策がありますか?

layout

23
RhymeGuy

使いやすさの観点からは、本のタイトルとその表紙の結び付きについて疑いの余地がないため、最適な選択はおそらく#2でしょう(ゲシュタルトの近接原理を参照)。

www.barnesandnoble.comの例:demo screenshot

ただし、高すぎる行を避けるために、垂直比率の制限を選択する必要があります。カバーが高すぎる場合は、高さを特定の値に固定し、側面に空きスペースを残す必要があります。

enter image description here

52
Stefano

レターボックスまたはピラーボックスを画像から取得した色で描画して、センタリングを使用して、自然に塗りつぶすことができます。

1
JDługosz