jQuery 图像/窗口调整大小--最大调整大小约束

Question

我目前有一个页面，其中我有固定大小的 div，当用户向下滚动时加载页面（类似于 Infinite Scroll），并且目前正在开发使加载的图像和容器随浏览器窗口一起动态调整大小的功能。我目前的问题是我目前正在使用$(window).width 和$(window).height，这自然会导致图像调整为窗口宽度。

我想知道我可以设置什么 maxWidth 和 maxHeight 以使图像的大小不会超过其原始大小？我一直在使用$(window) 来测试功能，但我基本上不希望图像变得比原始尺寸大。我试过$(this)，但它导致比率等于1，导致没有调整大小。

    $(window).resize(function () {
        imageResize();
    });

    function imageResize() {
        $(".added").each(function () {
                var maxWidth = $(window).width();
                var maxHeight = $(window).height();
                var ratio = 0;
                var width = $(this).width();
                var height = $(this).height();

                if (width > maxWidth) {
                    ratio = (maxWidth / width);
                    $(this).width(maxWidth);
                    $(this).height(height * ratio);
                    $(this).parent().height(height * ratio);
                    $(this).parent().width(maxWidth);   
                } else {
                    ratio = (maxWidth / width);
                    $(this).width(maxWidth);
                    $(this).height(height * ratio);
                    $(this).parent().height(height * ratio);
                    $(this).parent().width(maxWidth);   
                }
        });
    }

Answer 1

您希望将max-height 和max-width 属性设置为您所说的值，这不会强制图像增长超过其原始高度或宽度，并且如果它更大，则会将其最小化。

用途：

$("#imageId").attr("max-width",maxWidth);
$("#imageId").attr("max-height",maxHeight);

Answer 2

我会改变风格： ($this).style.maxWidth = maxWidth;