调整图像大小均来自Facebook Graph API的专辑图片

Question

我已经创建了一个模态窗口，可以显示每个Facebook相册的缩略图。但我遇到的问题是，当我使用Fb Graph API获取相册图片时，图像尺寸不同！因此，虽然我的模态窗口可能会强制每个缩略图的某个宽度，但高度可能会根据返回的图片大小而有所不同。我无法通过强制最大高度或最小高度来纠正这个问题，因为它会拉伸和缩小图片并最终看起来很有趣！我一直在寻找使用某种类型的参数来获取相册图像的方形＆＃39; square＆＃39;图像或＆＃39;作物＆＃39;图像，但没有运气。任何帮助将不胜感激。

以下是我在图浏览器中使用的Fb Graph API的调用，尝试为每个图像强制标准尺寸。

'me?fields=id,name,albums{cover_photo,photo_count,picture,name}'

这里有一些失败的尝试，使每张照片相等。

  

我吗？字段= ID，名字，相册{cover_photo，PHOTO_COUNT，图像？类型=正方形，名称}   我？场= ID，名字，专辑{cover_photo，PHOTO_COUNT，图片？类型=缩略图，名}   我吗？字段= ID，名字，相册{cover_photo，PHOTO_COUNT，picture.height（200）.WIDTH（200），名称}

这是我的js代码，用于获取相册图像，然后将它们放入模态窗口。

＆＃13;

＆＃13;

scope.getFbAlbumData = function(accessToken) {
   var albumIds = [];
   var columnCount = 0;

   FB.api('me?fields=id,name,albums{cover_photo,photo_count,picture,name}', 'get', {
     access_token: accessToken
   }, function(response) {
     if (response.error) {
       yb.base.displayNotification('Oh no! Something went wrong. Please contact YogaBandy Help Desk', 'danger');
       return false;
     }

     $('#uploadModal').on('hidden.bs.modal', function() {
       var data = response.albums.data;
       var rowContents = "";

       $('#modalContainer').load(scope.enumControllers.getAlbumModal, function(response, status, xhr) {
         for (var i = 0, l = data.length; i < l; i++) {

           if (columnCount < 3) {

             rowContents += "<div class=\"col-sm-4\" style=\"padding-right: 5px; padding-left: 5px;\"><div class=\"thumbnail\" data-albumid=\"" + data[i].id + "\"><img style=\"\" src=\"" + data[i].picture.data.url + "\" alt=\"...\" class=\"d\"><div class=\"caption\"><p class=\"album-title-name\">" + data[i].name + "</p><p>" + data[i].photo_count + " photos</p></div></div></div>";
             columnCount++;
           }

           if (i == l || columnCount == 3 || i + 1 == l) {
             $("#albumPicturesModalBody").append("<div class=\"row\">" + rowContents + "<\div>");
             rowContents = "";
             columnCount = 0;
           }
         }

         $("#albumPicturesModal").modal('show');
       });
     });

     $('#uploadModal').modal('hide');
   });
 }

＆＃13;

＆＃13;

＆＃13;

这是模态窗口的样子，你可以看到图像的大小不同。

我希望这些图像更加统一！