Question

我正在开发照片共享网站。当以完整尺寸显示图像时，我希望宽度最大为800px，高度最大为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);
        }
    }

Answer 1

你可以用 max-width或max-height

Answer 2

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

如果您按宽度限制，则乘以800 /宽度。

如果您按高度限制，则乘以600 /身高。

Answer 3

这样的事情：

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);
}

缩放图像并保持其比例

3 个答案: