缩放图片

Question

我在350px x 350px大的div内显示图片。人们可以将图片上传到我的文件服务器，并且该图片的目的地链接是在数据库中创建的，也是一个ID。获取链接的php文档位于根文件夹中，所有图片保存在名为图片的子文件夹中。我显示了使用这样的画面：

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

的$id变量点击从以前的页面的链接时被存储。

我的问题：并非所有的图片都是相同的格式。我想要显示它们，以便尺寸为350px，其他尺寸按比例。我该怎么做呢？简单地做到这一点：

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

将拉伸图片到350x350从而破坏比例。任何帮助赞赏。

Answer 1

要保留宽高比，您可以检索图像尺寸并使用350px的最大值应用比率。

下面是一个例子：

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/