0

在使用 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 元素是不可能的。

感谢您的输入！

4

4 回答 4

0

此外，您不需要调整任何 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"
    });
});
}
于 2013-08-19T14:25:47.627 回答
0

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

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
        });
    });
}
于 2013-08-19T14:32:16.250 回答
0

一件巧妙的事情可能是使其成为一个插件。例如 ：

(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);
于 2013-08-19T14:44:00.807 回答
0

marginTop 和 marginLeft 变量应该在本地声明

var marginLeft, marginTop;
于 2013-08-19T14:30:05.443 回答