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

我將樣式更改為：（$ this）.style.maxWidth = maxWidth;

Answer 2

您想將max-height和max-width屬性設置為您說的值，這不會強制圖像增長到超出其原始高度或寬度，並且如果圖像更大，則將其最小化。

采用：

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