1

我正在开发一个照片共享网站。当以全尺寸显示图像时，我希望宽度最大为 800 像素，高度最大为 600。

下面的代码适用于缩放，但它不保持图像的比例。我想我可以改用百分比，但我仍然希望图像具有这些特定的最大值（h：800，w：600）。

有没有办法用 jQuery 来实现呢？

提前致谢！

    if ($('#photo').length > 0) {
        var imgWidth = $("#photo").width();
        var imgHeight = $("#photo").height();

        if (imgWidth > 800) {
            $("#photo").width(800);
        }
        if (imgHeight > 600) {
            $("#photo").height(600);
        }
    }
4

3 回答 3

4

你可以使用 max-width或max-height

于 2012-05-14T20:34:38.237 回答
1

关键是将宽度和高度乘以相同的缩放常数。

如果您受宽度限制，请乘以 800/宽度。

如果您受高度限制，请乘以 600/高度。

于 2012-05-14T20:33:49.017 回答
1

像这样的东西：

var imgWidth = $("#photo").width();
var imgHeight = $("#photo").height();
var maxWidth = 800;
if (imgWidth > maxWidth) {
    var newWidthMultiplier = maxWidth / imgWidth;
    $("#photo").width(maxWidth);
    $("#photo").height(newWidthMultiplier * imgHeight);
}
于 2012-05-14T20:34:06.890 回答