0

JS と jQuery スニペットを数年間使用した後、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 では不可能です。

ご意見ありがとうございます。

4

4 に答える 4

0

marginTop および marginLeft 変数はローカルで宣言する必要があります

var marginLeft, marginTop;
于 2013-08-19T14:30:05.443 に答える
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

素晴らしいことの 1 つは、それをプラグインにすることです。例えば ​​：

(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

以下のすっきりしたコードで、冗長なコードを削除しました。

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 に答える