gallery-applicationをビルドするときに、現在さまざまな解像度に苦労しています。私は問題を認識しました: 写真はまったく異なる解像度であるか、横向き/縦向きで撮影されている可能性があります。画像を強制的に固定解像度にすると、引き伸ばされて表示される可能性があります。そうでない場合: 次のような結果が期待できます (解像度が緩い 6 つの異なる画像の例で、固定幅のみ):
私が実際にこのようなものを探しているとき(同じ解像度の6つの画像):(
これら2つのギャラリーは実際には同じコードを実行しています)
これを視聴者にとってできるだけ苦痛のないものにする方法についての提案をいただければ幸いです。ありがとう！
芸術的志向の写真家を気にするなら、画像をトリミングしないでください。
それらを最大サイズ (幅または高さのいずれか) で特定のメジャー 400px にサイズ変更し、それぞれを正方形の div に配置します。
あなたは画像の寸法について話していると思います（1インチのピクセル数である解像度ではありません）。
必要なものを取得するには：（1）画像を表示する幅と高さの比率を選択します（2）上記の比率に合わせて画像の余分な部分を切り取ります（PHP用のGDライブラリを使用できます）
例: すべての縦向きの写真を横向きの写真にするには、上部と下部を切り取ります。縦向きの写真を横向きにすることも解決策の 1 つですが、これは写真を見るために首をひねらなければならないため、視聴者にとっては好ましくありません。
何も切り取らずに画面上の余白をできるだけ少なくしたい場合は、変更されていない形で画像の最適な配置を見つける必要があります。これは非常に難しい (NP 完全な?) 問題ですが、必要に応じて手抜きをすることができます。
あなたが投稿した画像を見ると、このように 5 枚を比較的きれいに並べることができます: 縦の 2 枚を下に並べ、横の 3 枚を縦に重ねて並べます。2 つのポートレートの高さが 3 つのランドスケープの高さと等しくなるようにスケーリングすると、全体のサイズはほぼ同じになります。
カメラの一般的な縦横比 (16:9 や 4:3 など) 用の「きれいな」画面いっぱいのスタッキング方法を見つけることができ、その仮定に基づいて作業を進めることができます。