Установка пользовательского размера миниатюр изображений, извлеченных из JQUERY/FLICKR API

Я добавляю галерею на веб-сайт и хочу получить изображения из учетной записи flickr.

У меня это работает, но я хотел бы установить нестандартный размер для миниатюр, а не только для маленьких, средних и больших, css работает для фрейма, но изображение внутри искажается, поэтому можно ли установить размер в jquery ??

код, который я использую (мой API и идентификатор 00000 только для этого поста), чтобы получить ленту flickr:

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

});

у кого-нибудь когда-нибудь была эта проблема?

ваше здоровье


person user692574    schedule 05.05.2011    source источник


Ответы (3)


Не поможет ли overflow: hidden?

As in:

img {
    width: 100px;
    height: 100px;
    overflow: hidden;
}
person Ewout Kleinsmann    schedule 24.07.2011

Похоже, вы можете получить только определенный список фиксированных размеров для миниатюр фотографий Flickr, например s (маленький квадрат 75x75), q (большой квадрат 150x150), t (миниатюра, 100 по длинной стороне) и т. д. Для динамического размера вам, вероятно, понадобится какой-нибудь инструмент обрезки, например Jcrop.

person 0x4a6f4672    schedule 07.08.2012

Обычно я выбираю наиболее подходящий размер (_s или _m) и использую обрезку css. Оберните изображение в div шириной 100%. С помощью overflow:hidden вы можете обрезать изображение.

person Kamiel Verwer    schedule 03.02.2013