Масштабирование фотографий

Question

Я показываю фотографии в пределах div размером 350px x 350px. Люди могут загружать изображения на мой файловый сервер, а целевая ссылка на это изображение создается в базе данных, а также на идентификаторе. Документ php, получающий ссылку, находится в корневой папке, и все снимки сохраняются во вложенной папке с изображениями. Я показываю картинку, используя что-то вроде этого:

$piclink = "SELECT `link` FROM `pictures` WHERE `id=`.$id.`"; 

$id переменных хранятся при нажатии на ссылку с предыдущей страницы.

Моя проблема: Не все фотографии одного формата. Я хочу показать их так, чтобы размер max составлял 350 пикселей, а другое измерение соответствовало пропорции. Как мне это сделать? Просто так:

echo "<img href=" . $piclink . " height='350px' width='350px'/>" 

будет растягивать изображение до 350x350, нарушая таким образом пропорции. Любая помощь оценивается.

Answer 1

Чтобы сохранить соотношение сторон, вы можете получить размеры изображения и применить соотношение, используя максимум 350 пикселей.

Вот пример:

HTML

<div id="img-holder"></div> 

Код

var img = new Image(); 
img.onload = function() { 
    alert('Orignal width:'+img.width+', height:'+img.height); 
    var width, height; 
    if (img.width > img.height) { 
     width = (img.width > 350 ? 350 : img.width); 
     height = img.height * (350/img.width); 
    } else { 
     height = (img.height > 350 ? 350 : img.height); 
     width = img.width * (350/img.height); 
    } 
    img.width=width; 
    img.height=height; 
    $("#img-holder").append(img); 
} 
img.src = "http://mps.thebeautyquotient.com/images/val4a.jpeg" 

Вот jsfiddle: http://jsfiddle.net/aN6Ec/