スクロールせずに最大の画面領域が使用されるように、1つのHTMLページに3つの画像を収めようとしています。画面サイズが変更された場合は、最大の画面領域をカバーするように画像を再配置する必要があります。それぞれの写真は異なる寸法を持っています。フィットを簡単にするために、各写真をトリミングすることができます（最大2：3の比率）。レイアウトは流動的で応答性が高い必要があります。以下の例を参照してください
この問題について私が検討している2つのフレームワークは、TwitterBootstrapとjQueryMasonryですが、これらのいずれもフィッティングの問題を解決しません。
現在、私はこの問題を解決し、それぞれからcssを使用して正方形のサムネイルを作成し、それらの画像を重ね合わせていますが、ユーザーは画像全体を重ねずにできるだけ大きく表示したいと考えています。
純粋なCSSを使用してかなり近づくことができます。この例を見て、Google Chromeで試してみてください：http：//jsbin.com/ixomav/1 （ソース）
それはかなり粗雑ですが、それはアイデアを広める必要があります。さらに進んで、jsコードを追加して、適切なアスペクト比で画像のサイズを変更したり、cssのみのアプローチを試し続けたりすることができます。私の例ではウィキペディアのランダムな画像を使用しましたが、すべての写真が同じサイズであると、より簡単に時間を過ごすことができます。
高さを削除すると、適切にアスペクトされた画像が得られますが、その問題は空白です。例：http: //jsbin.com/ixomav/2
Isotopeをチェックしてください：http ：//isotope.metafizzy.co/demos/images.html
