缩放图片答案

【问题标题】：Scaling pictures缩放图片
【发布时间】：2013-03-15 09:45:02
【问题描述】：

我在 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，从而破坏比例。任何帮助表示赞赏。

【问题讨论】：

有一个问题可以很好地回答这个问题...
popnoodles，你指的是stackoverflow.com/questions/2076284/…吗？
不，可以用 CSS 完成
查看Zebra Image 库
您不必同时指定高度和宽度。如果您只指定一个，浏览器将缩放图像并计算出另一个维度。你仍然需要弄清楚哪一边最长。

标签： php mysql image

【解决方案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/

【讨论】：