如何让这个功能更整洁

Question

在使用 JS 和 jQuery-sn-ps 几年后，我编写了自己的小函数来替换 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 元素是不可能的。

感谢您的意见！

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

下面的代码更整洁，我删除了多余的代码。

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