タイトルが説明するとおりです。
画像のコレクションから div に配置できる画像の数を決定する必要があります。たとえば、100px x 100px で、各画像の幅と高さです。
私はこれのアルゴリズムを理解しようとしてきましたが、私の頭は揚げられています。
私がこれまでに持っているもの (JavaScript) は、幅 + 高さ (パディングを引いたもの) / 持っている画像の数を取ることです。たとえば、100x100 に配置する画像が 13 個あるとします。たとえば、最大 4 個配置できますが、各画像の高さ (幅は 100px になります) をどのように決定して比例的に適合させるのですか?
アップデート
さて、左右の画像を切り取らずに 100x100 ブロックに表示したい画像が 20 個以上あります。では、コードを介して、それぞれ 25px x 25px の 4 つの画像しか表示できないと判断するにはどうすればよいでしょうか。100*100 以内に最適に収まるように、4 つの画像の適切な width*height を決定するにはどうすればよいですか。
簡単な答えは、WidthOfYourDisplayArea \ NumberOfImagesYouWantToFitInThatArea です。「\」は整数除算を意味しますが、それ以上の意味があります。
基本的に、これはタイリングの問題です。つまり、100x100 の長方形をさまざまなサイズの 20 個のサムネイルで埋めます (以下を参照してください)。ただし、サムネイルのサイズを固定しているため、対処が簡単な問題になります。
画像には縦横比があるため、1 つの寸法だけで作業し、もう 1 つの寸法は「自然に解決」する必要があります。
いずれにしても、サムネイルは 25x25 のサイズにする必要がありますが、コンテンツが歪みなく表示されるように、サムネイル内の画像のサイズを変更する必要があります。したがって、できることは、imgs を div 内にラップすることです。div は 25x25 になりますが、imgs のサイズは異なります。
サムネイルを作成しようとしている元の画像が (たとえば) 1024x768 の場合、その縦横比は Width / Height = 1024/768 = 1.33333 です。あなたが見つけようとしているのは、幅を固定することによる画像の高さです。したがって、25 * (高さ / 幅) (反転に注意してください) のようなものを見ていますが、これは 25 * (1/1.33333) = 18.75004 のようなものになります。したがって、このサムネイルは、25x25 の正方形を横切り、上下に約 3 ピクセルのスペースを占める「帯」のように見えます。
これが役立つことを願っています。