さまざまなサイズの画像を持つ親指を一覧表示する方法
私は助けが必要です、あなたの意見と私の問題を解決するためにどのようなオプションがありますか。現在、ThumbビューのあるWebサイトで作業しており、アイテムの表示方法に満足していません。次のようなものがあります。
したがって、私が直面している本当の問題は、各親指の内側にロードされた画像のサイズが異なる可能性があること、他の画像の幅が広いこともあります。そのため、次のように各画像を親指の中央に配置することにしました。
- 高さがX軸の中央にある幅よりも大きい画像
- 高さがマイナーで、幅がY軸の中央にある画像
このようにして、ユーザーに画像を正しく表示し、ズームや切り取りを行わないようにしましたが、親指は非常に見苦しくなり、ビューはたとえば次のようになります。
画像のサイズは、一部のサービスから動的に取得するため、処理できないものです。より正確には、これはサイト内のリストのキャプチャです。
画像間の上下のスペースは、親指のdivのサイズが原因であるので、ユーザーが親指の2つのボタンにカーソルを合わせたときに親指が下にあることが必要なため、本当に気に入らないスペースができます。少なくとも、それらを表示するのに十分な高さです（これは、幅が広すぎる画像では問題になる可能性があります）。では、このリストのUI/UXを改善するための推奨事項は何ですか？よろしくお願いします！
外側の親指divを取り除くか、実際の画像と同じサイズにサイズ変更して、周囲に小さなパディングを配置してから、流れるグリッドパターン、時には石造レイアウトを呼び出します。
CSSでこれを行うためのソースは次のとおりです。