썸네일의 맞춤 크기 설정 JQUERY/FLICKR API에서 가져온 이미지

Question

나는 웹 사이트에 갤러리를 추가하고 있으며 flickr 계정에서 이미지를 가져 오려고합니다.

나는 그것이 작동하지만 소형, meduim 및 대형뿐만 아니라 크기에 맞게 사용자 지정 크기를 설정하고 싶습니다. 프레임에 대한 CSS 작동하지만 내부 이미지가 왜곡되어 크기가 jquery로 설정 될 수 있습니까 ??

(내 API 및 ID는이 게시물에 대한 00000입니다)는 플리커 피드를 끌어 사용하여 코드 메신저는 다음과 같습니다

$(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

오버 플로우 하지 않을까요 : 숨겨진 트릭을 할?

으로 지역 : 당신은 단지 특정 list of fixed sizes for Flickr thumbnail photos를 검색 할 수 있습니다처럼

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

Answer 2

그것은 예를의 (작은 사각형 75x75), Q (긴 쪽 썸네일, 100) (대형 광장 150 × 150), t에 대한 보인다 동적 크기의 경우 Jcrop과 같은 자르기 도구가 필요합니다.

Answer 3

일반적으로 가장 적합한 크기 (_s 또는 _m)를 가져오고 CSS 사용을 자릅니다. div 너비 100 %로 이미지를 줄 바꿈하십시오. 오버플로 : 숨겨진 이미지를자를 수 있습니다.