設置從JQUERY/FLICKR拉取的縮略圖圖片的自定義大小API

Question

我正在向網站添加一個圖庫，並且我想從flickr帳戶中提取圖像。

我有它的工作，但我想設置一個自定義大小的縮略圖不只是小，meduim和大，css作品的框架，但裏面的圖像會變形，所以可以在jquery中設置大小？

使用（我的API和ID是00000只這個帖子）拉飼料的Flickr代碼IM是：

$(function() { 
var apiKey = '000000000000000000000000000000'; 
var userId = '000000000'; 
var tag = 'gsow,cycle,event'; 
var perPage = '20'; 
var showOnPage = '8'; 

$.getJSON('http://api.flickr.com/services/rest/?format=json&method='+ 
    'flickr.photos.search&api_key=' + apiKey + '&user_id=' + userId + 
    '&tags=' + tag + '&per_page=' + perPage + '&jsoncallback=?', 
function(data){ 
    var classShown = 'class="lightbox"'; 
    var classHidden = 'class="lightbox hidden"'; 

    $.each(data.photos.photo, function(i, rPhoto){ 
     var basePhotoURL = 'http://farm' + rPhoto.farm + '.static.flickr.com/' 
      + rPhoto.server + '/' + rPhoto.id + '_' + rPhoto.secret; 

     var thumbPhotoURL = basePhotoURL + '_s.jpg'; 
     var mediumPhotoURL = basePhotoURL + '.jpg'; 

     var photoStringStart = '<a '; 
     var photoStringEnd = 'title="' + rPhoto.title + '" href="'+ 
      mediumPhotoURL +'"><img src="' + thumbPhotoURL + '" alt="' + 
      rPhoto.title + '"/></a>;' 
     var photoString = (i < showOnPage) ? 
      photoStringStart + classShown + photoStringEnd : 
      photoStringStart + classHidden + photoStringEnd; 

     $(photoString).appendTo("#flickr"); 
    }); 
    $("a.lightbox").lightBox(); 
}); 

}）;

任何人都有這個問題？

歡呼

Answer 1

豈不溢出：隱藏做的伎倆？

如：

img { 
    width: 100px; 
    height: 100px; 
    overflow: hidden; 
} 

Answer 2

它看起來像你只能取回一定list of fixed sizes for Flickr thumbnail photos，例如S（小方75x75），Q（上最長邊縮略圖，100）（大廣場150×150），T等等。對於動態尺寸，您可能需要某種修剪工具，如Jcrop。

Answer 3

我通常拉最合適的尺寸（_s或_m）和使用css裁剪。將圖像以100％的分隔寬度包裝。隨着溢出：隱藏你可以裁剪圖像。