Question

我在350px x 350px大的div中显示图片。人们可以将图片上传到我的文件服务器，并在数据库和id中创建到该图片的目标链接。获取链接的php文档位于根文件夹中，所有图片都保存在名为pictures的子文件夹中。我使用类似的东西显示图片：

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

点击上一页的链接时会存储$id变量。

我的问题：并非所有图片的格式都相同。我想显示它们，以便 max 尺寸为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/

缩放图片

1 个答案: