Question

在使用JS和jQuery-snippets多年后，我编写了自己的小函数来替换imagefill。我是否需要为此代码感到羞耻或是否可以？我能做得更好吗？是否存在明显（在您眼中）错误，而不是基本功能 - 它毕竟是有效的 - 但是在风格上。

function fillsensible(maxWidth, maxHeight, container) {

var img = $(container).find('img');
var container = $(container);
img.css("opacity", "0");

img.load(function() {
    var ratio = 0;
    var containerHeight = container.height();
    var containerWidth = container.width();

    if(img.width() > maxWidth) {
        ratio = maxWidth / img.width();
        img.css("width", maxWidth);
        img.css("height", img.height() * ratio); // Scale height based on ratio
    } else if (img.height() > maxHeight) {
        ratio = maxHeight / img.height();
        img.css("height", maxHeight);
        img.css("width", img.width() * ratio); // Scale height based on ratio
    };

    container.css('position', 'relative');
    img.css('position', 'absolute');
    marginTop = (containerHeight - img.height())/2;
    marginLeft = (containerWidth - img.width())/2;  
    img.css({
      "top": marginTop,
      "left": marginLeft,
      "opacity": "1"
    });
});
}

如果从一开始就不清楚：这会在DOM中查找img中的给定容器元素，将其按原始大小按比例缩放到给定的最大大小（以像素为单位），并将其定位在容器的中心。

对于背景图像来说这很容易，但据我所知，img-elements是不可能的。

感谢您的投入！

Answer 1

此外，您不需要调整img元素的高度

代码可能只是

function fillsensible(maxWidth, maxHeight, container) {

var img = $(container).find('img');
var container = $(container);
img.css("opacity", "0");

img.load(function() {
    var ratio = 0;
    var containerHeight = container.height();
    var containerWidth = container.width();

    if(img.width() > maxWidth) {
        ratio = maxWidth / img.width();
        img.css("width", maxWidth);
        img.css("height", "auto"); // Scale height based on ratio
    } else if (img.height() > maxHeight) {
        ratio = maxHeight / img.height();
        img.css("height", maxHeight);
        img.css("width", "auto"); // Scale height based on ratio
    };

    container.css('position', 'relative');
    marginTop = (containerHeight - img.height())/2;
    marginLeft = (containerWidth - img.width())/2;  
    img.css({
      "position": "absolute"
      "top": marginTop,
      "left": marginLeft,
      "opacity": "1"
    });
});
}

Answer 2

marginTop和marginLeft变量应在本地声明

var marginLeft, marginTop;

Answer 3

下面的Neater代码，我删除了冗余代码。

function fillsensible(maxWidth, maxHeight, container) {

    var container = $(container).css('position', 'relative'),
        img = container.find('img').css({"opacity": 0, 'position': 'absolute'});

    img.load(function() {
        var ratio = 0,
            containerHeight = container.height(),
            containerWidth = container.width(),
            marginLeft, marginTop;

        if(img.width() > maxWidth) {
            ratio = maxWidth / img.width();
            img.css({ 
                "width": maxWidth,
                "height": img.height() * ratio
            });
        } else if (img.height() > maxHeight) {
            ratio = maxHeight / img.height();
            img.css({
                "height": maxHeight,
                "width": img.width() * ratio
            });
        };

        marginTop = (containerHeight - img.height())/2;
        marginLeft = (containerWidth - img.width())/2;  
        img.css({
          "top": marginTop,
          "left": marginLeft,
          "opacity": 1
        });
    });
}

Answer 4

一个巧妙的事情可能就是让它成为一个插件。例如：

(function($) {

    function fillsensible(maxWidth, maxHeight, container) {
        // your previous code
    }

    $.fn.fillsensible = function(maxWidth, maxHeight) {
        fillsensible(maxWidth, maxHeight, this);
        return this;
    }
})(jQuery);

所以你可以这样使用它并将其他函数调用链接到容器元素

$("#container").fillsensible(100, 200);

如何使这个功能更整洁

4 个答案: