javascript - Javascript html で画像をトリミングする

Question

Facebookの写真を表示する必要があるWebページを開発しています。jQueryモバイルを使用しています。

これで、すべての写真とタイトルなどを含むリストを動的に表示できるようになりました。ただし、画像はサムネイル バージョンで表示され、すべて同じではありません。横向きモードの写真はすべて問題ありませんが、縦向きモードの写真は他の写真よりも狭く、リストは問題ありません。

すべての画像をトリミングして、それらをより小さく、すべて等しく表示したいと考えています。たとえば、20x20 程度です。

私はこれについて多くの答えを見つけました。それらのいくつかを試しましたが、どれも機能しません。私は彼らの例で猫と一緒に試してみました。多くの回答で見ましたが、うまくいきませんでした。それは、すべての例が静的な画像用であり、私のように動的に生成されたリストではないためだと思います。

これは、リストを生成し、写真にタイトルと説明を付けるための私のコードです。

$("#photosNJ").after('<div data-role="page" data-add-back-btn="true" id=Gallery'+ i +
    ' class="gallery-page"' + ' data-url="Gallery' + i + '"> ' +
    ' <div data-role="header"><h1>Gallery</h1></div> ' + ' <div data-role="content"> ' +
    ' <ul class="gallery"></ul> ' + ' </div> ' +
    ' </div> ');

for (var n=0; n < albumPhotos[i].length; n++) {
    $('#Gallery' + i + ' .gallery').append('<li><a href="' + albumPhotos[i][n] 
        + '"  rel="external"><img src="' +  albumThumbnails[i][n] + '"' + '/> </a> </li>');
}

表示したいアルバムと、設定したアルバムの数を制御するためのアルバムの番号を渡します。

写真をトリミングするために、コード内で既に実行されているスクリプトを呼び出す方法がわかりません。画像の適切な部分を選択する必要はありません。左上 (または下) の角から 20x20 (またはその他) のポイントまでトリミングするだけです。Facebook から他のサイズの画像を取得できる場合、または既にトリミングされている場合、それも良い解決策です。

最初のコメントが言ったように、CSS を CSS ファイルに追加し、コードを次のように設定しました。

for(var n=0; n < albumPhotos[i].length; n++) {
                //console.log("cropping");
                $('#Gallery' + i + ' .gallery').append('<li><a href="' + albumPhotos[i][n] 
                + '"  rel="external"><img class="crop" src="' +  albumThumbnails[i][n] + '"' + '/> </a> </li>');
           }

しかし、画像は同じように表示されます。メインページでそのソリューションを試し、ハードコーディングして動作させました。画像はトリミングされています。しかし、リストを動的に生成しようとすると、そうではありません。誰でもそれを解決する方法を知っていますか?