Question

我目前有一个页面，我有固定大小的div，当用户向下滚动时加载页面（类似于无限滚动），我目前正致力于使加载的图像和容器随浏览器窗口一起动态调整大小。我目前的问题是我目前正在使用$(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;

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

2 个答案: