Setting a custom size of thumbnails images pulled from JQUERY/FLICKR API

Question

I am adding a gallery to a website and I want to pull the images from a flickr account.

I have it working but I would like to set a custom size to the thumbnails not just the small , meduim and large, css works for the frame but the image inside gets distorted so can the size be set in jquery ??

the code im using (my api and id are 00000 for this post only) to pull the flickr feed is:

$(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();
});

});

anyone ever have this issue?

cheers

Answer 1

Wouldn't overflow: hidden do the trick?

As in:

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